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.
