Pourquoi em au lieu de px?

766

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. La question est donc pourquoi devrais-je utiliser em au lieu de px lors de la définition des styles en CSS? Y a-t-il un bon exemple qui illustre cela?

Spoike
la source
Pour ce que ça vaut, voici la définition des différentes unités en CSS: w3.org/TR/css3-values/#lengths .
Ryan

Réponses:

554

Il est faux de dire que l'un est un meilleur choix que l'autre (ou les deux n'auraient pas été assignés à leur propre but dans la spécification). Il peut même être intéressant de noter que StackOverflow utilise largement les 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 in , pt ou cm ) qui se trouve également être 1/96 d'une unité in (voir pourquoi plus tard). Puisqu'il s'agit d'une mesure absolue, elle peut être utilisée chaque fois que vous souhaitez définir quelque chose comme étant une taille particulière, plutôt que d'être proportionnel à autre chose comme la taille de la fenêtre du navigateur ou la taille de la police.

    Comme toutes les autres unités absolues, les unités px ne sont pas mises à l'échelle en fonction de la largeur de la fenêtre du navigateur. Ainsi, si la conception de votre page entière utilise des unités absolues telles que px plutôt que % , elle 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.

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

    Toutes les mesures absolues sont étroitement liées les unes aux autres; qui est, 1Dans est toujours 96px , tout comme 1Dans est toujours 72pt . (Notez que 1 pouce n'est presque jamais réellement un pouce physique lorsque vous parlez de médias basés 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 pixel physique sur l'écran et un sursera égal à 96 pixels physiques. Sur les écrans qui diffèrent considérablement en densité de pixels ou en distance de visualisation, ou si l'utilisateur a zoomé la page en utilisant la fonction de zoom du navigateur, px ne sera plus nécessairement lié 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 (comme px ou pt ), cela sera affecté par le choix des polices dans le navigateur ou le système d'exploitation de l'utilisateur si elles en ont créé une, donc cela n'a pas de sens pour les utiliser comme unité générale de longueur, sauf lorsque vous souhaitez spécifiquement la mettre à l'échelle en fonction de la taille de la police.

    Utilisez em lorsque vous souhaitez 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 aux unités px pour des choses comme la largeur totale d'un design si votre design ne dépend pas de tailles de pixels spécifiques pour définir sa taille.

    L'utilisation de % d' unités dans votre conception permet à votre conception de s'adapter à la largeur de l'écran / de l'appareil, contrairement à l'utilisation d'une unité absolue telle que px .

thomasrutter
la source
27
Il n'y a aucun moyen de convertir entre ems et pixels, sauf si vous savez quelle est la taille d'un 'em' en pixels, dans ce contexte. Cela peut dépendre de la taille de police héritée de cet élément, qui peut à son tour dépendre de la taille de police du document dans son ensemble, qui peut dépendre des paramètres de taille de police dans le navigateur et / ou le système d'exploitation de l'utilisateur. Si vous visez une taille de pixel particulière, spécifiez-la en pixels. C'est à dire, si vous voulez 990px, alors mettez 990px. Si vous voulez des pixels, pourquoi ne pas les utiliser?
thomasrutter
7
Hein? Je n'ai rien dit qui contredit cela. Je disais à quoi servent les unités px et à quoi servent les unités em. Vous semblez impliquer que l'utilisation d'unités px est généralement mauvaise. Si un site tombe en panne lorsque vous ajustez la taille de police par défaut du navigateur, le défaut n'est pas les unités px, ce sont de mauvaises hypothèses. De toute évidence, le concepteur Web s'est appuyé sur la taille de police par défaut (souvent une bonne idée), et a néanmoins créé le reste de leur mise en page en se basant sur de fausses hypothèses sur cette taille de police, comme essayer d'aligner des éléments graphiques de taille fixe avec du texte, où le la taille de l'élément ne correspond au texte qu'à une taille de police.
thomasrutter
3
Ce n'est ni faux, ni simplifié à l'excès. De toute évidence, si vous utilisez em dans une ligne où vous déclarez réellement la taille de police, il est impossible pour em dans cette ligne d'être relative à la taille de police de ce même élément après toute déclaration de taille de police sur cet élément, car il a gagné '' Je ne le sais pas encore - il doit donc être relatif à la taille de police que l'élément aurait eu avant de déclarer la propriété font-size sur ce même élément. Étant donné que tout autre comportement est littéralement impossible, je n'y vois aucune ambiguïté.
thomasrutter le
3
@TalhaSayed, vous confondez les pixels avec l'unité px. Ce n'est pas la même chose - lisez les spécifications CSS. L'unité px est une unité absolue au même sens que l'unité in, l'unité cm ou l'unité pt.
thomasrutter
7
@thomasrutter, WOW! Je viens de googler pour ça et oui, je dois dire que j'avais tort. Toutes ces années et je n'en avais aucune idée. Je pensais que 1 pixel = 1 "point sur l'écran". Je suppose que j'ai appris quelque chose de nouveau aujourd'hui.
Talha Sayed
143

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

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

Capture d'écran de Firefox avec un zoom de texte de 120%

Notez comment les boutons du haut 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.

flodin
la source
15
Vous pouvez également zoomer du texte dans Firefox sans zoomer sur les images dans Affichage -> Zoom -> Zoom texte uniquement, puis zoomer normalement.
thomasrutter
4
+1 bon point. bien qu'en ce qui concerne les grandes résolutions, vous pouvez définir votre paramètre d'écran pour afficher le texte à 120 dpi au lieu de la résolution standard 96
Spoike
5
@ Spoike: Je le ferais, mais Firefox n'honore pas le paramètre DPI du système. Voir bugs.launchpad.net/ubuntu/+source/firefox/+bug/19524
flodin
6
@Juan: C'est parce qu'ils utilisent la méthode de zoom la plus simple: redimensionner la page entière. Mais cela signifie qu'avec un zoom de 150%, une page de 1000 pixels de large devient 1500 pixels de large. C'est le moyen le plus simple de zoomer pour les développeurs de sites Web et de navigateurs. Malheureusement, ce n'est pas très convivial. C'est pourquoi d'autres navigateurs ont un zoom de texte qui grossit le contenu uniquement sans changer la mise en page. Mais cela signifie que les développeurs Web doivent essentiellement concevoir leurs mises en page pour une grande variété de tailles de police, ce qui limite considérablement ce que vous pouvez faire en termes de conception. Il est assez difficile de rendre un site beau avec une police de 16 pt ainsi qu'une police de 48 pt.
Lèse majesté
1
@Lesemajeste ne met pas à l'échelle toute la page ce que devrait être le "zoom". N'y a-t-il pas un moment où le développeur doit dire aux utilisateurs de niche de faire face ou de ne pas visiter? Je ne construirais jamais une seule page en tenant compte des polices 16 points et 48 points. C'est tout simplement stupide et, comme vous l'avez souligné, très limitant la mise en page. Je pense que c'est génial que FF veuille faire un zoom spécial pour le texte uniquement, mais je ne vais pas concevoir dans cet esprit.
1934286
93

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

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

Utiliser px pour définir la largeur

Voici un exemple illustratif. Supposons que nous ayons une balise div que nous voulons transformer en une boîte de date élégante, nous pouvons avoir un 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-boxclasse en 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 redimensionner le texte dans notre navigateur, le design se brisera. Le texte saignera également en dehors de la boîte, ce qui est presque le même que ce qui se passe avec la conception de SO comme souligne Flodin . Cela est dû au fait que la boîte conservera la même taille en largeur qu'elle est verrouillée 50px.

Utiliser em à la place

Une façon plus intelligente consiste à définir la largeur en 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 design fluide sur la boîte de date, c'est-à-dire que la boîte sera redimensionnée 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 en *tant que 10pt et sera redimensionnée 2,5 fois à cette taille de police. Ainsi, lorsque vous redimensionnez les polices dans le navigateur, la boîte aura 2,5 fois la taille de cette taille de police.

Spoike
la source
1
Je me demande: comment s'adaptera-t-il aux systèmes de grille en utilisant des pourcentages pour la largeur? Va-t-il le casser si le bloc contianing reçoit une largeur de 100%?
hugo der hungrige
65
Ce n'est plus vrai de nos jours. En appuyant sur Ctrl+et Ctrl-dans n'importe quel navigateur moderne, les valeurs des pixels seront également mises à l'échelle. C'est comme ça depuis un moment maintenant.
YemSalat
1
@YemSalat Cela vaut-il également pour l'ajustement du DPI dans le système d'exploitation?
angularsen
@anjdreas aucune idée pour être honnête.
YemSalat
4
@spoike, Downvoting this as it's clairement plus vrai comme indiqué par le commentaire de YemSalat
RayLoveless
60

Le sommet voté réponse ici de thomasrutter a raison dans sa réponse au sujet de la fin de support . Mais est très très mal sur la taille d'un pixel. Donc, même s'il est ancien, je ne peux pas le laisser être débattu.

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


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


Preuve
Tracez 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. La ligne est-elle de 10 pouces maintenant? Toujours pas?
Affichez la ligne sur votre iPhone. Toujours la même taille? Pourquoi pas?

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

Vbakke
la source
4
> Pour avoir une idée de l'apparence d'un px, imaginez un écran d'ordinateur CRT des années 1990: le plus petit point qu'il peut afficher mesure environ 1 / 100e de pouce (0,25 mm) ou un peu plus. L'unité px tire son nom de ces pixels d'écran. - Citation du W3C: w3.org/Style/Examples/007/units.fr.html#units
Jay Zelenkov
4
Toutes les mesures absolues sont étroitement liées les unes aux autres; c'est-à-dire que 1in est toujours * 96px *, tout comme 1in est toujours * 72pt *. (Notez que 1 pouce n'est presque jamais réellement un pouce physique lorsque vous parlez de médias basés sur écran) Je ne pense pas que la réponse la plus votée parle de pouce physique. Les relations sont parmi les différents schémas de dimensionnement absolus comme dans et pt. Par exemple. Le simple fait d'étendre votre «preuve» si je trace une ligne de 1_en_ mesurera-t-il 1 pouce physiquement?
Saumitra R. Bhave du
5
-1 pour une diatribe incorrecte et non pertinente. pxest dimensionné par rapport à un pixel de référence , pas les pixels sur les écrans sur lesquels vous êtes ici. Vous n'aimerez peut-être pas cela, mais faire sortir votre règle ne va pas en faire un fait moins important, ni contribuer à répondre à la question. stackoverflow.com/questions/27382331/… "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."
underscore_d
52

Il est utile pour tout ce qui doit être mis à l'échelle en fonction de la taille de la police.

Il est particulièrement utile sur les navigateurs qui implémentent le zoom en ajustant la taille de la police. Donc, si vous emredimensionnez tous vos éléments en utilisant leur échelle en conséquence.

Daniel Rikowski
la source
97
De nos jours, tous les navigateurs modernes implémentent le zoom en mettant à l'échelle toutes les unités absolues de manière égale, plutôt qu'en mettant à l'échelle uniquement les tailles de police. Notez que cette réponse a été écrite en 2009 alors que c'était moins le cas qu'aujourd'hui.
thomasrutter le
22

Parce que le em ( http://en.wikipedia.org/wiki/Em_(typography) ) est directement proportionnel à 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 ( notez : pas la même chose que des points), un em est de 16 pixels.

Cela conduit à deux choses (liées):

  1. il est facile de conserver des proportions, si vous choisissez de modifier vos tailles de police dans votre CSS plus tard.
  2. De nombreux navigateurs prennent en charge des tailles de police personnalisées, remplaçant votre CSS. Si vous concevez tout en pixels, votre mise en page peut se casser dans ces cas. Mais, si vous utilisez des ems, ces remplacements devraient atténuer ces problèmes.
Henrik Paul
la source
Je cherchais juste une formule de calcul :-) c'était peut-être bien d'ajouter un exemple inversé, comme 2pxc'est le cas 0.125empour une police de 16 pixels.
Loup
12

exemple:

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

1 {taille de police: 1.2em;} // 12px

2 {taille de police: 1.4em;} // 14px

3 {taille de police: 1.6em;} // 16px

4 {taille de police: 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

Muhammad Usman Ghani
la source
3
Il serait préférable d'ajouter une image qui illustre l'effet.
Loup
8

Une raison très pratique est qu'IE 6 ne vous permet pas de redimensionner la police si elle est spécifiée en utilisant px, alors que si vous utilisez une unité relative telle que 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 IE 6.

John Topley
la source
1
Notez qu'IE7 et IE8 ne peuvent toujours pas redimensionner le texte avec une taille de police spécifiée en pixels (à travers Page > Text Size). Cependant, IE7 a ajouté la page zoom ( Page > Zoom) qui zoome toute la page, y compris le texte, évidemment.
mercator
1
Mieux que Page> Zoon, essayez d'appuyer sur les touches [CTRL] + [-] ou [+] de votre clavier dans IE7 +, Chrome et Firefox - zoom pleine page sans la plupart des problèmes rencontrés en essayant de changer la taille des polices.
Rich Turner
1
Presque aucun ordinateur au monde n'utilise IE6 en 2017
Michael
3
@MichaelMay C'est pourquoi la réponse et les autres commentaires ont été écrits en 2009 ... lol
Chev
7

utilisez px pour un placement précis des éléments graphiques. utilisez em pour les mesures devant effectuer le positionnement et l'espacement autour des éléments de texte comme la hauteur de ligne, etc. px est précis en pixels, em peut changer dynamiquement avec la police utilisée

Scott Evernden
la source
c'est le cas mais cela ne correspond pas aux exigences minimales des WCAG 2.0: w3.org/WAI/WCAG20/quickref/Overview.php - Techniques suffisantes pour 1.4.4
meo
2

La principale raison d'utiliser em ou pourcentages est de permettre à l'utilisateur de modifier la taille du texte sans casser le design. Si vous concevez avec des polices spécifiées en px, elles ne changent pas de taille (dans IE 6 et autres) si l'utilisateur choisit une taille de texte plus grande . C'est très mauvais pour les utilisateurs ayant un handicap visuel.

Pour plusieurs exemples et articles sur des conceptions comme celle-ci (il y a une myriade de choix), consultez le dernier numéro de A List Apart: Fluid Grids , l'ancien article How to Size Text in CSS ou Bulletproof Web Design de Dan Cederholm .

Vos images doivent toujours être affichées avec des tailles px, mais, en général, il n'est pas considéré comme une bonne forme de dimensionner votre texte avec px.

Autant que je méprise personnellement IE6, il est actuellement le seul navigateur approuvé pour la plupart des utilisateurs de notre société Fortune 200.

Traingamer
la source
1
+1 grilles fluides était en fait ce que je cherchais lorsque j'ai posé la question. (aussi, votre entreprise ne devrait-elle pas passer à IE7?)
Spoike
Si vous me le demandez, ils devraient utiliser Firefox, mais ils ne me le demandent pas. :-) (IE7 serait mieux que 6, mais je ne suis pas au courant de la prise de décision)
Traingamer
2

Il existe une solution simple si vous souhaitez utiliser px pour spécifier la taille de la police, mais que vous souhaitez tout de même l'utilisabilité qu'em en offre en la plaçant dans votre fichier CSS:

body {
  font-size: 62.5%;
}

Spécifiez maintenant vous p(et d'autres) balises comme ceci:

p {
  font-size: 0.8em; /* This is equal to 8px */
  font-size: 1.0em; /* This is equal to 10px */
  font-size: 1.2em; /* This is equal to 12px */
  font-size: 2.0em; /* This is equal to 20px */
}

Etc.

Codeur anonyme
la source
2
N'est-ce pas très dépendant du fait que personne ne touche aux paramètres CSS personnalisés de leur navigateur?
Spoike
4
Oui, tu devrais juste te mettre font-size: 10px. css-tricks.com/forums/discussion/1230/…
m33lky
Je préfère laisser la taille de la police: 100% et utiliser des mixins pour déterminer la valeur em
gunnx
0

Vous voudrez probablement utiliser em pour les tailles de police jusqu'à ce qu'IE6 soit parti (de votre site). Px sera correct lorsque le zoom de page (par opposition au zoom de texte) devient le comportement standard.

Traingamer a déjà fourni les liens nécessaires .

user73912
la source
0

Le pixel est une unité absolue tandis que rem / em sont des unités relatives. Pour en savoir plus: https://drafts.csswg.org/css-values-3/

Vous devez utiliser l'unité relative lorsque vous souhaitez que la taille de police soit adaptative en fonction de la taille de police du système car le système fournit la valeur de taille de police à l'élément racine qui est l'élément HTML.

Dans ce cas, lorsque la page Web est ouverte dans Google Chrome, la taille de police de l'élément HTML est définie par Chrome, essayez de la modifier pour voir l'effet sur les pages Web avec des polices d'unités rem / em.

entrez la description de l'image ici

Si vous utilisez pxcomme unité pour les polices, les polices ne seront pas redimensionnées alors que les polices avec rem/em unit seront redimensionnées lorsque vous modifiez la taille de police du système.

Utilisez donc pxquand vous voulez que la taille soit fixe et utilisez rem/ emquand vous voulez que la taille soit adaptative / dynamique à la taille du système.

thisshri
la source
-1

Le consensus général est d'utiliser des pourcentages pour le dimensionnement des polices, car il est plus cohérent entre les navigateurs / plates-formes.

C'est drôle cependant, j'ai toujours utilisé pt pour le dimensionnement des polices et j'ai supposé que tous les sites l'utilisaient. Vous n'utilisez normalement pas les tailles px dans d'autres applications (par exemple Word). Je suppose que c'est parce qu'ils sont destinés à l'impression - mais la taille est la même dans un navigateur Web que dans Word ...

Chèvre mécontente
la source
-2

Évitez d'utiliser em ou px à la place, car il est plus facile de trouver la valeur calculée. Mais entre em et px, px est meilleur car em est difficile à déboguer.

Juan Tamad
la source
Veuillez ajouter quelques explications supplémentaires à votre réponse afin que d'autres puissent en tirer des leçons - d'autant plus que c'est une très vieille question qui a déjà des tonnes de réponses votées
Nico Haase