En CSS, quelle est la différence entre em et px?


Réponse 1:

Au final, ce sont tous des pixels

En fin de compte, le navigateur Web indique au système d'exploitation de dire à un pilote d'affichage de mettre quelque chose sur un écran en pixels.

Mais, ce «pixel» est un pixel physique. C'est ce que nous pourrions appeler un «pixel d'appareil».

Vous ne parlez pas de «pixels de l'appareil». Vous parlez de pixels CSS.

Pixels CSS! == Pixels

Un «pixel CSS» est à peu près un peu proche d'un pixel de périphérique. [1] Un pixel CSS repose sur cette idée d'un «pixel de référence» qui est l'angle visuel sur un appareil avec une densité de pixels de 96 dpi à environ une distance de bras. [2] Grâce à la puissance des mathématiques, le «pixel de référence» pourrait finir étant de 1,3 mm sur un écran. Mais, il existe un certain nombre de raisons qui peuvent ne pas être le cas.

Il est important de commencer par le point de base que px ne signifie pas «pixel sur un écran».

Il existe différentes unités de mesure en CSS

Il existe deux grandes catégories de vos unités de mesure [3]:

  1. unités absoluesunités relatives

s'il s'agit d'une «unité absolue», alors cette unité de mesure a une relation avec quelque chose dans le monde physique.

S'il s'agit d'une unité relative, la valeur est calculée en unité absolue.

Alors px vs em

px est une «unité absolue»; le moteur CSS va dire au navigateur d'utiliser cette «longueur» pour le dimensionnement. Le navigateur et le système d'exploitation détermineront comment cette longueur se compare à un «pixel de périphérique» et le rendront. Px a une relation statique avec ce «pixel de référence» dont nous avons parlé plus tôt. px il ne changera pas.

em est une «unité relative». Le moteur CSS va d'abord calculer cette valeur en une longueur de pixel. Après avoir calculé la longueur des pixels, il enverra cette valeur calculée au navigateur. em, en particulier, est calculé sur la base de la taille de police relative de l'élément conteneur. La valeur de em peut changer; si vous changez la taille de police de n'importe quel élément parent, cela affectera la valeur de em.

La meilleure façon de penser à em est de prétendre que le bit em n'est pas là et de traiter la valeur comme un multiplicateur. par exemple:

.foo {font-size: 1.5em; / * confus * / font-size: 1.5; / * Non valide, mais aurait dû être fait au lieu de l'appeler em * / line-height: 1.5; / * voyez comment la hauteur de ligne accepte un multiplicateur sans unité? * /}

Donc, la première grande différence est que l'un est absolu, l'autre est relatif.

px et em dans l'application

Différentes situations mettront en évidence les forces et les faiblesses de chaque unité [4].

Parce que px est une unité de mesure absolue, vous avez une prévisibilité élevée pour ce que vous obtenez à l'écran. Mais vous n'avez aucune proportionnalité; les propriétés dimensionnées en px ne sont pas recalculées si vous ajustez une taille de police dans un parent.

Vous rencontrez donc souvent ceci:

body {taille de police: 16px;} h1 {taille de police: 32px; / * unités absolues pour la taille de police * / padding: 8px 16px; / * unités absolues de remplissage * /} .foo {font-size: 12px; / * ajuste la taille de la police dans un parent * /} / * écrit un nouvel ensemble de règles pour garder les choses proportionnées * / .foo h1 {font-size: 24px; / * réécriture d'une règle de police pour rendre h1 2x normal * / remplissage: 6px 12px; / * réécriture pour 1 / 4ème et 1/2 * /}

Étant donné que em est une unité relative basée sur la taille de police héritée, vous pouvez avoir une faible prévisibilité pour ce que vous obtenez à l'écran, en particulier dans les grandes équipes. Mais vous aurez une proportionnalité élevée; les propriétés dimensionnées en em seront recalculées si vous ajustez une taille de police dans un parent.

body {font-size: 16px;} h1 {font-size: 2em; / * unité relative * / padding: .25em .5em; / * unités relatives pour le remplissage * /} .foo {font-size: .75em; }

Vous avez donc économisé l'écriture d'un ensemble de règles en utilisant em. La taille de police calculée à 24 pixels et le remplissage calculé à 6 pixels 12 pixels.

La grande différence est donc la possibilité de dimensionner les choses proportionnellement - sans écrire plus de code!

Notes de bas de page

[1] Syntaxe et types de données de base

[2] Module de valeurs et d'unités CSS niveau 3

[3] En quoi "em" "px" et "%" sont-ils différents l'un de l'autre en CSS?

[4] Les sites Web réactifs concernent la façon dont vous mesurez (dans votre CSS)


Réponse 2:

px est des pixels. Il peut être légèrement différent dans différents navigateurs, mais il est probable qu'il soit cohérent dans le même environnement et sur un site sur un navigateur / appareil donné. px a du sens pour des choses comme la largeur des lignes et des bordures.

em est identique à la taille de police de l'élément courant (qui est généralement hérité). Ainsi, lorsque la taille de la police est modifiée, la valeur de em change également. C'est pratique lorsque vous souhaitez espacer quelque chose par rapport à la taille actuelle du texte. Il est également utile car il est relatif à d'autres contenus, il est donc plus susceptible de fonctionner sur plusieurs écrans. em est particulièrement utile pour définir l'espacement, les marges et le remplissage autour du texte.

rem est root em. C'est comme em, mais plutôt que d'être relatif à la taille de police actuelle, il est relatif à la taille de police du document d'origine. Cela signifie que rem restera cohérent sur une page, quelle que soit la police actuelle. Dans de nombreuses situations, rem est plus facile à utiliser car il est plus prévisible. Cela est particulièrement judicieux pour les marges qui doivent rester cohérentes dans un document même lorsque la taille des polices locales change entre les éléments.

Généralement, em et rem sont plus faciles à maintenir dans une page, et le consensus général est actuellement d'utiliser em et rem plutôt que px. Le consensus général n'est pas toujours correct, mais c'est une bonne façon de procéder à moins d'avoir une bonne raison de faire autre chose.


Réponse 3:

px est des pixels. Il peut être légèrement différent dans différents navigateurs, mais il est probable qu'il soit cohérent dans le même environnement et sur un site sur un navigateur / appareil donné. px a du sens pour des choses comme la largeur des lignes et des bordures.

em est identique à la taille de police de l'élément courant (qui est généralement hérité). Ainsi, lorsque la taille de la police est modifiée, la valeur de em change également. C'est pratique lorsque vous souhaitez espacer quelque chose par rapport à la taille actuelle du texte. Il est également utile car il est relatif à d'autres contenus, il est donc plus susceptible de fonctionner sur plusieurs écrans. em est particulièrement utile pour définir l'espacement, les marges et le remplissage autour du texte.

rem est root em. C'est comme em, mais plutôt que d'être relatif à la taille de police actuelle, il est relatif à la taille de police du document d'origine. Cela signifie que rem restera cohérent sur une page, quelle que soit la police actuelle. Dans de nombreuses situations, rem est plus facile à utiliser car il est plus prévisible. Cela est particulièrement judicieux pour les marges qui doivent rester cohérentes dans un document même lorsque la taille des polices locales change entre les éléments.

Généralement, em et rem sont plus faciles à maintenir dans une page, et le consensus général est actuellement d'utiliser em et rem plutôt que px. Le consensus général n'est pas toujours correct, mais c'est une bonne façon de procéder à moins d'avoir une bonne raison de faire autre chose.