Application réactive: quelles unités de taille de police contre vs.

Je suis la construction d'un réactif application ciblée pour desktop, tablette et téléphone mobile en utilisant le HTML et le CSS mais je ne suis pas sûr de ce que l'unité de police de la taille dois-je utiliser que la police s'intègre bien dans n'importe quelle taille d'écran. Quelle est la différence entre les em, px, pt et le pourcentage? Quelle est la meilleure choisir pour moi?

Je voudrais l'entendre de véritables expériences à ce sujet dans les applications sensibles pour les ordinateurs de bureau, tablettes et téléphones mobiles

Je serais reconnaissant pour toute aide!

source d'informationauteur dextervip

  1. 20

    Vous voudrez peut-être jeter un oeil à cet article: petit lien.

    Mise à jour: Voici un petit peu d'explication sur la façon dont cela s'applique à votre cas:

    • px: un pixel est un petit carré (en général) de votre périphérique d'affichage peut afficher qu'une seule couleur à la fois. Votre la résolution de l'écran spécifie le nombre de pixels de votre écran/écran est de. Ainsi, lorsque vous spécifiez: font-size: 12px;vous êtes essentiellement dit au navigateur que chaque lettre doit être de 12 pixels de haut (environ -- lettres différentes varier en hauteur un peu, mais la différence relative est conservé).
    • pourcentages: font-size: 50%; définit la taille de police de votre élément à 50% de la taille de la police de son élément parent.
    • pt: 1pt (point) est de 1 /72 cm. Réglage font-size: 12pt; définit la hauteur de vos personnages à 12 /72 pouces (encore une fois, les différents caractères diffèrent un peu).
    • em: em est la largeur de la lettre " m " dans la police, fondamentalement la même, en pourcentage, sauf que 1em est 100% et 1.5em est 150%.

    De sorte que votre choix sera probablement px car elle permettrait de préserver la logique des proportions de la taille du texte à d'autres de la taille des éléments.

  2. 4

    Différentes dimensions sont

    1. “Ems” (em): “em” est une solution évolutive à l'unité. Un em est égal au courant de taille de police, par exemple, si la taille de police du document est 12pt, cadratin (1 em est égal à 12pt. Ems sont évolutives dans la nature, donc 2em serait égal à 24pt, .5em serait égal à 6 pts, etc..
    2. Pourcentage (%): Le pourcentage de l'unité est un peu comme l'unité “em”, à l'exception de quelques différences fondamentales. D'abord et avant tout, la police de la taille est égale à 100% (c'est à dire 12pt = 100%). Tout en utilisant le pourcentage de l'unité, le texte reste entièrement modulable pour les appareils mobiles et de l'accessibilité.
    3. Pixels (px): Pixels sont de taille fixe unités qui sont utilisées dans l'écran des médias (c'est à dire à la lecture sur l'écran de l'ordinateur). Un problème avec l'unité de pixel, c'est qu'il n'est pas à l'échelle.
    4. Points (pt): Points sont traditionnellement utilisés dans la presse écrite (tout ce qui est imprimé sur du papier, etc.). Un point est égal à 1 /72ème de pouce. Les Points sont un peu comme les pixels, en ce qu'ils sont de taille fixe des unités et ne peuvent échelle dans la taille.
    5. Fenêtre d'affichage unités : - ce sont par rapport à la vue du port. Ils sont nouveaux dans CSS3
      1. 3.2 vw = 3.2% de la largeur de la fenêtre d'affichage
      2. 3.2 vh = 3.2% de la hauteur du viewport
      3. 3.2 vmin = Moins de 3,2 vw ou 3.2 vh
      4. 3.2 vmax = Plus de 3,2 vw ou 3.2 vh

    voir kyleschaeffer.com/.... et css-tricks.com/....

    Mais pour atteindre sensible faute de frappe regardez https://stackoverflow.com/a/21981859/406659

  3. 3

    Il me semble le meilleur sera la future rem et vmin unités documenté ici.

    À composer avec l'ancienne version de navigateur que vous voudrez peut-être avoir un peu de CSS à l'automne dos défini quelque chose comme:

    p, li
{
  font-size: 12px;
  font-size: 0.75rem;
}

    ou 

    p, li
{
  font-size: 12px;    /* old */
  font-size: 1.2vm;   /* IE9 */
  font-size: 1.2vmin;
}

    (crédit à Craig Butler)

  4. 2

    Essayez d'utiliser un mélange de px, em, et rem.

    Chris Coyier explique dans ce post que l'utilisation de px pour votre document, rem pour vos modules (ie. les sections de votre page), et de l'em pour les éléments de texte à l'intérieur de vos modules, la page de mise à l'échelle proprement.