Question Pourquoi em au lieu de px?


J'ai entendu dire que vous devriez définir les tailles et les distances dans votre feuille de style avec em au lieu de pixels. Donc la question est pourquoi devrais-je utiliser em au lieu de px lors de la définition des styles dans css? Y a-t-il un bon exemple qui illustre cela?


690
2018-03-04 07:08


origine


Réponses:


Il est faux de dire que l'un est un meilleur choix que l'autre (ou les deux n'auraient pas eu leur propre objectif dans la spécification). Il peut même être intéressant de noter que StackOverflow fait un usage intensif des unités px. Ce n'est pas le mauvais choix qu'on a dit à Spoike.

Définition des unités

  • px est une unité de mesure absolue (comme dans, pt, ou cm) qui se trouve également être 1/96 d'un dans unité (plus sur pourquoi plus tard). Parce que c'est une mesure absolue, elle peut être utilisée chaque fois que vous voulez définir quelque chose d'une taille particulière, plutôt que d'être proportionnelle à quelque chose d'autre comme la taille de la fenêtre du navigateur ou la taille de la police.

    Comme toutes les autres unités absolues, px les unités ne s'ajustent pas en fonction de la largeur de la fenêtre du navigateur. Ainsi, si votre conception de page entière utilise des unités absolues telles que px plutôt que %, il ne s'adaptera pas à la largeur du navigateur. Ce n'est pas intrinsèquement bon ou mauvais, juste un choix que le concepteur doit faire entre adhérer à une taille exacte et être inflexible par rapport à l'étirement, mais dans le processus ne pas adhérer à une taille exacte. Il serait typique pour un site d'avoir un mélange d'objets de taille fixe et de taille flexible.

    Les éléments de taille fixe doivent souvent être incorporés dans la page, tels que des bannières publicitaires, des logos ou des icônes. Cela vous assure presque toujours besoin au moins certains Mesures basées sur px dans un design. Les images, par exemple, seront mises à l'échelle (par défaut) de sorte que chaque pixel ait une taille de 1 * px *, donc si vous concevez autour d'une image, vous aurez besoin px unités. Il est également très utile pour le dimensionnement précis des polices, et pour les largeurs de bordure, où, en raison de l'arrondissement, il est plus judicieux d'utiliser px unités pour la majorité des écrans.

    Toutes les mesures absolues sont étroitement liées les unes aux autres; C'est, 1in est toujours  96px, tout comme 1in est toujours  72pt. (Notez que 1in est presque jamais réellement physique pouce quand on parle de média sur écran). Toutes les mesures absolues supposent une résolution d'écran nominale de 96ppi et une distance de visualisation nominale d'un moniteur de bureau, et sur un tel écran un px sera égal à un physique pixel sur l'écran et un dans sera égal à 96 pixels physiques. Sur les écrans qui diffèrent significativement en densité de pixels ou en distance de visualisation, ou si l'utilisateur a fait un zoom sur la page en utilisant la fonction de zoom du navigateur, px ne se rapportera plus nécessairement aux pixels physiques.

  • em n'est pas une unité absolue - c'est une unité qui est relative à la taille de police actuellement choisie. Sauf si vous avez remplacé le style de police en définissant votre taille de police avec une unité absolue (telle que pxou pt), ceci sera affecté par le choix des polices dans le navigateur ou le système d'exploitation de l'utilisateur s'il en a fait un, donc cela n'a pas de sens d'utiliser em comme unité de longueur générale sauf si vous voulez spécifiquement l'adapter à la taille de la police Balance.

    Utilisation em quand vous voulez spécifiquement que la taille de quelque chose dépende de la taille de police actuelle.

  • % est également une unité relative, dans ce cas, par rapport à la hauteur ou la largeur d'un élément parent. Ils sont une bonne alternative à px unités pour des choses comme la largeur totale d'une conception si votre conception ne repose pas sur des tailles de pixels spécifiques pour définir sa taille.

    En utilisant % unités dans votre conception permet à votre conception de s'adapter à la largeur de l'écran / dispositif, alors qu'en utilisant une unité absolue comme px ne fait pas.


498
2018-03-04 07:18



J'ai un petit ordinateur portable avec une haute résolution et je dois exécuter Firefox avec un zoom de 120% pour être capable de lire sans plisser les yeux.

De nombreux sites ont des problèmes avec cela. La mise en page devient toute tronquée, le texte en boutons est coupé en deux ou disparaît entièrement. Même stackoverflow.com en souffre:

Screenshot of Firefox at 120% text zoom

Notez comment les boutons supérieurs et les onglets de page se chevauchent. S'ils auraient utilisé des unités em au lieu de px, il n'y aurait pas eu de problème.


132
2018-06-01 23:09



La raison pour laquelle j'ai posé cette question était que j'ai oublié comment utiliser em parce que c'était un moment que je piratais joyeusement en CSS. Les gens n'ont pas remarqué que j'ai gardé la question générale, car je ne parlais pas de dimensionnement des polices en soi. J'étais plus intéressé par la façon de définir les styles sur tout élément de bloc donné sur la page.

Comme Henrik Paul et d'autres ont souligné em est proportionnelle à la taille de la police utilisée dans l'élément. C'est une pratique courante de définir des tailles sur des éléments de bloc en px, cependant, le dimensionnement des polices dans les navigateurs rompt généralement cette conception. Le redimensionnement des polices est généralement effectué avec les touches de raccourci Ctrl++ou Ctrl+-. Donc, une bonne pratique consiste à utiliser em à la place.

Utiliser px pour définir la largeur

Voici un exemple illustratif. Disons que nous avons un div-tag que nous voulons transformer en une boîte de date élégante, nous pouvons avoir du code HTML qui ressemble à ceci:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Une implémentation simple définirait la largeur de la date-box classe dans px:

* { margin: 0; padding: 0; }

p.month { font-size: 10pt; }

p.day { font-size: 24pt; font-weight: bold; }

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 50px;
}

Le problème

Cependant, si nous voulons dimensionner le texte dans notre navigateur, le design va casser. Le texte saignera également hors de la boîte ce qui est presque la même chose que ce qui se passe avec le design de SO flodin fait remarquer. C'est parce que la boîte restera de la même taille en largeur qu'elle est verrouillée 50px.

En utilisant em à la place

Une manière plus intelligente consiste à définir la largeur dans ems à la place:

div.date-box {
    background-color: #DD2222;
    font-family: Arial, sans-serif;
    color: white;
    width: 2.5em;
}

* { margin: 0; padding: 0; font-size: 10pt; }

// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of pt

De cette façon, vous avez un dessin fluide sur la boîte de date, c'est-à-dire que la boîte sera mise en forme avec le texte proportionnellement à la taille de police définie pour la boîte de date. Dans cet exemple, la taille de police est définie dans * comme 10pt et taille jusqu'à 2,5 fois à cette taille de police. Donc, lorsque vous dimensionnez les polices dans le navigateur, la boîte aura 2,5 fois la taille de cette police.


85
2018-03-04 07:12



La réponse la mieux votée ici de thomasrutter est juste dans sa réponse à propos de la em. Mais est très très faux sur la taille d'un pixel. Donc, même si c'est vieux, je ne peux pas le laisser être indéfini.

Un écran d'ordinateur est normalement pas 96dpi! (Ou ppi, si vous voulez être pédant.)


Un pixel n'a pas de taille physique fixe.
(Oui, il est fixé dans un écran seul, mais dans l'écran suivant, un pixel est probablement plus grand, ou plus petit, et certainement pas 1/96 d'un pouce.)


Preuve
Dessinez une ligne de 960 pixels de long. Mesurez-le avec une règle physique. Est-ce 10 pouces? Non..?
Connectez votre ordinateur portable à votre téléviseur. Est-ce que la ligne 10 pouces maintenant? Toujours pas?
Montrez la ligne sur votre iPhone. Toujours la même taille? Pourquoi pas?




Qui diable a inventé le mythe de l'écran d'ordinateur 96dpi?
(Certaines religions fonctionnent avec un mythe de 72 ppp.) Mais tout aussi faux.)


59
2018-03-04 07:18



Il est utile pour tout ce qui doit évoluer en fonction de la taille de la police.

Il est particulièrement utile sur les navigateurs qui implémentent le zoom en augmentant la taille de la police. Donc, si vous taillez tous vos éléments en utilisant em ils évoluent en conséquence.


46
2018-04-18 05:51



Parce que l'em (http://en.wikipedia.org/wiki/Em_(typography)) est directement proportionnelle à la taille de police actuellement utilisée. Si la taille de la police est, disons, de 16 points, un em est de 16 points. Si la taille de votre police est de 16 pixels (Remarque: pas le même que les points), un em est de 16 pixels.

Cela conduit à deux choses (liées):

  1. il est facile de conserver des proportions, si vous choisissez d'éditer vos tailles de police dans votre CSS plus tard.
  2. De nombreux navigateurs prennent en charge les tailles de police personnalisées, remplaçant votre CSS. Si vous concevez tout en pixels, votre mise en page risque de se casser dans ces cas-là. Mais, si vous utilisez ems, ces remplacements devraient atténuer ces problèmes.

21
2018-03-04 07:30



Exemple:

Code: body {font-size: 10px;} // garder à 10 toutes les tailles ci-dessous correctes, changer cette valeur et le reste changer pour être par ex. 1.4 de cette valeur

1 {font-size: 1.2em;} // 12px

2 {font-size: 1.4em;} // 14px

3 {font-size: 1.6em;} // 16px

4 {font-size: 1.8em;} // 18px

5 {font-size: 2em;} // 20px

...

corps

1

2

3

4

5

en changeant la valeur dans le corps le reste change automatiquement pour être une sorte de fois la valeur de base ...

10 × 2 = 20 10 × 1,6 = 16 etc.

vous pourriez avoir la valeur de base comme 8px ... donc 8 × 2 = 16 8 × 1.6 = 12.8 // peut être arrondi par le navigateur


10
2018-03-04 07:13



Une raison très pratique est que IE 6 ne vous permet pas de redimensionner la police si elle est spécifiée en utilisant px, alors que c'est le cas si vous utilisez une unité relative comme em ou pourcentages. Ne pas permettre à l'utilisateur de redimensionner la police est très mauvais pour l'accessibilité. Bien qu'il soit en déclin, il y a encore beaucoup d'utilisateurs d'IE 6 sur le marché.


8
2018-03-04 19:54



utilisez px pour le placement précis des éléments graphiques. utilisez em pour les mesures de positionnement et d'espacement autour des éléments de texte comme la hauteur de ligne, etc. px est précis au pixel près, em peut changer dynamiquement avec la police utilisée


7
2018-05-11 04:20