J'ai entendu, vous devez 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? Est-il un bon exemple qui illustre cela?
Réponses
Trop de publicités?
thomasrutter
Points
42905
Il est faux de dire que l'on est un meilleur choix que l'autre (ou les deux n'ont pas donné leur propre but dans la spécification). Il peut même être intéressant de noter que StackOverflow fait un large usage de px. Il n'est pas le mauvais choix Spoike a dit que c'était.
La définition des unités
-
px est une absolue unité de mesure (comme dans, pt, ou cm) qui se trouve également être 1/96 de l'un dans l'unité (en savoir plus sur pourquoi plus tard). Parce que c'est une mesure absolue, il peut être utilisé à tout moment vous souhaitez définir quelque chose à une taille particulière, plutôt que d'être proportionnelle à autre chose comme la taille de la fenêtre du navigateur ou de la taille de la police.
Comme toutes les autres unités absolues, px unités ne sont pas à l'échelle en fonction de la largeur de la fenêtre du navigateur. Ainsi, si l'ensemble de votre conception de page utilise des unités absolues comme px plutôt que d' %, il ne sera pas s'adapter à la largeur du navigateur. Ce n'est pas intrinsèquement bon ou mauvais, juste un choix que le concepteur doit faire entre adhérant à la taille exacte et d'être inflexible rapport à l'étirement, mais dans le processus, n'adhérant pas à la taille exacte. Il serait normal pour un site d'avoir un mélange de taille fixe et flexible des objets de la taille.
Taille fixe souvent des éléments doivent être intégrées dans la page - comme les bannières publicitaires, logos ou icônes. Cela vous garantit presque toujours besoin au moins de quelques px-mesures basées sur une conception. Les Images, par exemple (par défaut) être mis à l'échelle, de sorte que chaque pixel est 1*px* la taille, donc si vous êtes à la conception autour d'une image, vous aurez besoin px unités. Il est également très utile pour les précis de la taille de police, et pour les largeurs de la bordure, où, en raison des arrondis, il est logique d'utiliser px unités pour la majorité des écrans.
Toutes les mesures absolues sont rigidement liés les uns aux autres; c'est, 1en est toujours *96px*, tout comme 1en est toujours *72pt*. (Notez que 1en est presque jamais fait de physique de pouce quand on parle de médias). Toutes les mesures absolues assumer un nominal de la résolution de l'écran de 96ppi et d'un nominal de la distance d'affichage d'un moniteur de bureau, et sur un tel écran un px sera égal à un physique de pixel sur l'écran et l'autre en sera égal à 96 physique pixels. Sur les écrans qui diffèrent de manière significative dans les deux densité de pixels ou de la distance d'affichage, ou si l'utilisateur a zoomé de la page à l'aide du navigateur de la fonction de zoom, px ne sera plus nécessairement liés à la physique des pixels.
-
em n'est pas une unité absolue - c'est une unité qui est relatif à la actuellement choisi la taille de la police. Sauf si vous avez remplacé le style de police par le réglage de votre taille de la police avec une absolue unité (tels que px ou pt), ce sera affectée par le choix de polices de caractères dans le navigateur de l'utilisateur ou de l'OS si ils ont fait un, donc il n'a pas de sens de les utiliser em comme un général de l'unité de longueur à l'exception de l'endroit où vous souhaitez qu'il soit adapté à la taille de la police des échelles.
Utiliser em lorsque vous voulez que la taille de quelque chose d'dépendent de la taille de la police.
-
% est également une unité relative, dans ce cas, par rapport à la hauteur ou la largeur de l'élément parent. Ils sont une bonne alternative aux px unités pour des choses comme la largeur totale de la conception, si votre conception ne s'appuie pas sur des tailles de pixel pour définir sa taille.
À l'aide de % de parts dans votre conception permet à votre design pour s'adapter à la largeur de l'écran/de l'appareil, tandis que l'utilisation d'une absolue unité telle que px ne le fait pas.
flodin
Points
2489
J'ai un petit ordinateur portable avec une haute résolution et d'avoir Firefox en 120% de zoom de texte pour pouvoir lire sans strabisme.
De nombreux sites ont des problèmes avec cela. La mise en page devient tout déformé le texte dans les boutons est réduit de moitié ou disparaît complètement. Même stackoverflow.com souffre:
Notez comment les boutons du haut et les onglets de la page de chevauchement. Si ils ont utilisé em unités au lieu de px, il n'aurait pas été un problème.
La raison pour laquelle je pose cette question c'est parce que j'ai oublié comment utiliser em comme c'était alors que j'étais piratage heureux dans la CSS. Les gens n'ont pas remarqué que j'ai gardé la question générale que je n'étais pas parler sur le dimensionnement des polices en soi. J'étais plus intéressé comment faire pour définir des styles sur tout élément de bloc sur la page.
Comme Henrik Paul et d'autres ont souligné em est proportionnelle à la taille de police utilisée dans l'élément. C'est une pratique courante pour définir les tailles sur les éléments de bloc en px toutefois évaluer la taille des polices dans les navigateurs généralement les sauts de cette conception. Le redimensionnement des polices est généralement fait avec les touches de raccourci Ctrl+de+ ou Ctrl+-. Donc, une bonne pratique consiste à utiliser les em à la place.
À l'aide de px pour définir la largeur
Voici un excellent exemple. Disons que nous avons un div-tag que nous voulons transformer en une élégante zone de date, on peut avoir le code html qui ressemble à ceci:
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>
Une mise en œuvre simple serait de définir la largeur de l' date-box classe 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
Toutefois, si nous voulons la taille du texte dans notre navigateur, le design de casser. Le texte sera également saigner à l'extérieur de la boîte, qui est presque identique à ce qui se passe avec la conception que flodin points. C'est parce que la boîte restera la même taille en largeur car il est verrouillé 50px.
À l'aide de l'em au lieu
Une façon plus intelligente est de définir la largeur de l'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 date-boîte, c'est à dire la zone de la taille jusqu'en collaboration avec le texte en proportion de la taille de police définie pour la date-boîte. Dans cet exemple, la taille de police est définie en * comme 10pt et taille en hausse de 2,5 fois pour que la taille de la police. Ainsi, lorsque vous êtes dimensionnement des polices de caractères dans le navigateur, la zone de 2,5 fois la taille de la taille de police.
Vbakke
Points
227
Le haut voté réponse ici de thomasrutter est dans son bon droit de réponse à propos de l' em. Mais il est très très mal au sujet de la taille d'un pixel. Donc, même si elle est vieille, je ne peux pas le laisser être undebated.
Un écran d'ordinateur est normalement PAS 96 ppp! (Ou ppi, si vous voulez être pédant.)
Un pixel n'a PAS une taille physique fixe.
(Oui, il est fixé à l'intérieur d'un seul écran, mais dans l'écran suivant, un pixel est probablement plus grande, ou plus petite, et certainement PAS 1/96 de pouce.)
La preuve
Tracer une ligne, de 960 pixels de long. Mesurer avec une physique de la règle. Est-il 10 pouces? Non..?
Connectez votre ordinateur portable à votre TÉLÉVISEUR. Est la ligne 10 pouces maintenant? Toujours pas?
Afficher la ligne sur votre iPhone. Toujours la même taille? Pourquoi pas?
Qui diable a inventé le 96 ppp écran d'ordinateur mythe?
(Certaines religions fonctionner avec un 72dpi mythe. Mais tout aussi erronée.)
Daniel Rikowski
Points
27193
Il est d'usage pour tout ce qui a à l'échelle selon la taille de la police.
C'est particulièrement utile pour les navigateurs qui implémentent le zoom par mise à l'échelle la taille de la police. Donc, si vous modifiez la taille de tous vos éléments à l'aide de em à plus grande échelle en conséquence.
