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?

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 .

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:

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.

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.

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.)

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.

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.

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

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.

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

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.

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.

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 .

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.

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.

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 ...

É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.