Pourquoi em au lieu de px?
J'ai entendu dire que vous devriez définir des tailles et des distances dans votre feuille de style avec em plutôt qu'en pixels. La question est donc de savoir pourquoi devrais-je utiliser em au lieu de px lors de la définition des styles en css? Y at-il un bon exemple qui illustre cela?
La raison pour laquelle j'ai posé cette question était que j'avais oublié comment utiliser Em's, car c'était un moment que je piratais gaiement en CSS. Les gens n'ont pas remarqué que la question était générale, car je ne parlais pas de dimensionner les polices elles-mêmes. J'étais plus intéressé par la définition de styles sur un élément de bloc donné sur la page.
Comme Henrik Paul et d'autres ont souligné qu'em est proportionnel à la taille de police utilisée dans l'élément. Il est courant de définir la taille des éléments de bloc dans px, mais le dimensionnement des polices dans les navigateurs casse généralement cette structure. Le redimensionnement des polices se fait généralement avec les touches de raccourci Ctrl++ ou Ctrl+-. Donc, une bonne pratique consiste à utiliser em.
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 avons peut-être un code HTML ressemblant à 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 classe date-box 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 sera brisé. Le texte saignera également en dehors de la boîte, ce qui est presque identique à ce qui se passe avec la conception de SO comme le fait remarquer flodin Cela est dû au fait que la taille de la boîte restera la même, car elle est verrouillée sur 50px.
Utiliser em à la place
Une méthode 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 dimensionnée avec le texte proportionnellement à la taille de police définie pour la boîte de date. Dans cet exemple, la taille de la police est définie dans * comme étant de 10 points et sera redimensionnée 2,5 fois à cette taille de police. Ainsi, lorsque vous redimensionnez les polices dans le navigateur, la taille de la boîte sera 2,5 fois supérieure à celle de la taille de la police.
Il est faux de dire que l’un est un meilleur choix que l’autre (sinon les deux n’auraient pas défini leur propre objectif dans la spécification). Il peut même être intéressant de noter que StackOverflow utilise beaucoup 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 dans , pt , ou cm ) qui correspond également à 1/96 d'un dans unité (plus sur pourquoi plus tard). Comme il s’agit d’une mesure absolue, elle peut être utilisée chaque fois que vous souhaitez définir une taille particulière, plutôt que de la définir proportionnellement à une autre taille, telle que 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 votre conception de page 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, c'est 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 de combiner des objets de taille fixe et de taille flexible.
Les éléments de taille fixe doivent souvent être intégré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 certaines mesures au format px dans une conception. Les images, par exemple, seront (par défaut) dimensionnées de manière à ce que chaque pixel ait une taille de 1 * px *. Ainsi, si vous concevez autour d’une image, vous aurez besoin de px unités. Il est également très utile pour le dimensionnement précis des polices et pour les largeurs de bordure, car en raison de l'arrondi, il est plus logique d'utiliser px unités pour la majorité des éléments. écrans.
Toutes les mesures absolues sont étroitement liées les unes aux autres; c'est-à-dire que 1in est toujours 96px , juste comme 1in est toujours 72 pt . (Notez que 1in n’est presque jamais un physique pouce quand on parle de médias sur écran). Toutes les mesures absolues supposent une résolution d'écran nominale de 96 ppi et une distance de visualisation nominale d'un moniteur de bureau. Sur un tel écran, une px sera égale à un physique pixel à l'écran et un en sera égal à 96 physiques pixels. Sur les écrans dont la densité de pixels ou la distance de visualisation diffèrent de manière significative, ou si l'utilisateur a zoomé sur la page à l'aide de la fonction de zoom du navigateur, px ne sera plus nécessairement se rapportent 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 px ou pt ), le choix des polices dans le navigateur ou le système d'exploitation de l'utilisateur, le cas échéant, aura une incidence sur le choix des polices. Il n'est donc pas logique de les utiliser comme unité de longueur générale, sauf si vous souhaitez spécifiquement à mettre à l'échelle à mesure que la taille de la police change.
Utilisez em lorsque vous souhaitez spécifiquement que la taille de quelque chose dépende de la taille de la police actuelle.
% est également une unité relative, dans ce cas, relative à la hauteur ou à la largeur d'un élément parent. Ils constituent une bonne alternative aux unités px telles que la largeur totale d'un dessin si votre dessin ne repose pas sur des tailles de pixels spécifiques pour définir sa taille.
L'utilisation de % unités dans votre conception permet à votre conception de s'adapter à la largeur de l'écran/du périphérique, alors que l'utilisation d'une unité absolue telle que px ne le fait pas.
J'ai un petit ordinateur portable avec une haute résolution et je dois exécuter Firefox avec un zoom de texte de 120% pour pouvoir lire sans plisser les yeux.
De nombreux sites ont des problèmes avec cela. La mise en page devient complètement tronquée, le texte dans les boutons est coupé en deux ou disparaît complètement. Même stackoverflow.com en souffre:
Notez que les boutons du haut et les onglets de la 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 réponse la plus votée de thomasrutter est exacte dans sa réponse à propos de em . Mais est très très faux sur la taille d'un pixel. Donc, même s’il est vieux, je ne peux pas le laisser être imperturbable.
Un écran d'ordinateur n'est normalement pas 96 dpi! (Ou ppi, si vous voulez être pédant.)
Un pixel n'a PAS une taille physique fixe.
(Oui, il est fixé dans 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 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 redimensionné en fonction de la taille de la police.
C'est particulièrement utile sur les navigateurs qui implémentent le zoom en redimensionnant la taille de la police. Donc, si vous redimensionnez tous vos éléments avec em, ils s’adaptent en conséquence.
Parce que em ( http://en.wikipedia.org/wiki/Em_ (typographie) ) est directement proportionnel à la taille de la police actuellement utilisée. Si la taille de la police est de 16 points, l’un est de 16 points. Si votre taille de police est de 16 pixels ( note : ce n’est pas la même chose que des points), l’em est de 16 pixels.
Cela conduit à deux choses (liées):
- il est facile de garder les proportions, si vous choisissez de modifier vos tailles de police dans votre CSS ultérieurement.
- De nombreux navigateurs prennent en charge des tailles de police personnalisées, remplaçant ainsi votre CSS. Si vous concevez tout en pixels, votre mise en page risque de se briser dans ces cas. Toutefois, si vous utilisez ems, ces annulations doivent atténuer ces problèmes.
exemple:
Code: body {font-size: 10px;} // conservez à 10 toutes les tailles inférieures à correct, modifiez cette valeur et le reste, par exemple. 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 body, le reste change automatiquement pour devenir une sorte de fois la valeur de base…
10 × 2 = 20 10 × 1,6 = 16 etc
vous pouvez avoir la valeur de base 8px… donc 8 × 2 = 16 8 × 1,6 = 12,8 // peut être arrondi par le navigateur
Une raison très pratique est que IE 6 ne vous permet pas de redimensionner la police si elle est spécifiée à l'aide de px, mais si vous utilisez une unité relative telle que em ou des pourcentages. Ne pas permettre à l'utilisateur de redimensionner la police est très préjudiciable à l'accessibilité. Bien qu'il soit en déclin, il y a toujours beaucoup de IE 6 utilisateurs.
utilisez px pour un placement précis des éléments graphiques. utilisez em pour les mesures ayant à faire le positionnement et l'espacement autour d'éléments de texte tels que ligne-hauteur, etc. px est précis au pixel, em peut changer dynamiquement avec la police utilisée
Il existe une solution simple si vous souhaitez utiliser px pour spécifier la taille de la police, mais souhaitez tout de même la facilité d'utilisation fournie par em en l'insérant dans votre fichier CSS:
body {
font-size: 62.5%;
}
Maintenant, spécifiez-vous p (et autres) 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.
La raison principale d'utiliser em ou pourcentages est de permettre à l'utilisateur de modifier la taille du texte sans altérer le dessin. 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 des handicaps visuels.
Pour plusieurs exemples et articles sur de tels designs (il existe une myriade de choix), voir le dernier numéro de A List Apart: Fluid Grids , l'ancien article Comment redimensionner le texte en CSS ou celui de Dan Cederholm Bulletproof Web Design .
Vos images doivent toujours être affichées au format px, mais en général, il n’est pas considéré comme une bonne forme de redimensionner votre texte avec px.
Même si je méprise personnellement IE6, il est actuellement le navigateur seulement approuvé pour la majorité des utilisateurs de notre entreprise Fortune 200.
Pour ce que cela vaut, voici la définition des différentes unités en CSS: http://www.w3.org/TR/css3-values/#lengths .
Vous voudrez probablement utiliser em pour les tailles de police jusqu'à ce que IE6 disparaisse (de votre site). Px sera correct si le zoom de page (par opposition au zoom de texte) devient le comportement standard.
Traingamer a déjà fourni le liens nécessaires .