Quel est le contexte de l'em?

Question

Dans cet exemple:

LE CSS

h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }

LE HTML

<h1>Hi, I am a <span class="smaller">toad</span></h1>

Sera le mot "crapaud" de 0,5 fois 16px (le standard du navigateur font-size) ou de 0,5 fois 2em (taille de police de la h1)?

Answer 1

Elle est égale à l' calculé la valeur de la "police-taille" de la propriété de l'élément sur lequel il est utilisé. L'héritage descend de l'arbre de document.

Pour répondre à votre question, il serait de 0,5 fois le 2em, qui à son tour serait 2 fois quel que soit le h1 parent calculée de police-taille de l'est. ouf.

Il est également important de noter que si vous utilisez em sur d'autres propriétés CSS, par exemple, width ou height, le résultat sera calculé à partir de la calculés font-size de tout élément que vous appliquez l' width ou height , etc...

L'article suivant décrit l'utilisation et le contexte de l' em part plutôt bien, à mon avis, avec quelques autres à la lecture de documents et de ressources... rem des unités susceptibles de vous intéresser un peu aussi.

1. http://www.impressivewebs.com/understanding-em-units-css/
2. http://snook.ca/archives/html_and_css/font-size-with-rem
3. http://caniuse.com/rem

Vous pouvez également consulter ce violon pour voir comment il agit un peu plus clair:

http://jsfiddle.net/HpJjt/3/

Answer 2

L' em unité indique la taille de la police de l'élément, sauf lorsqu'il est utilisé dans la valeur de l' font-size de la propriété, où elle désigne la taille de la police de l'élément parent. En ce sens, dans le cas présenté, le contexte est l'élément parent.

Dans le cas présenté, la taille de la police du mot "crapaud" est donc égale à la taille de la police du parent de l' h1. Aucune valeur spécifique car il peut être déduit, pour elle, les données fournies.

Lorsque les tailles de police est calculée, la taille de la police de la mère de h1 a été calculé au moment de cette construction sera traitée; appelons - s. D'abord la taille de la police de l' h1 est calculée en multipliant s (la taille de la police de la société mère) par 2. Ensuite, la taille de la police de l' span élément est calculée en multipliant son parent de la taille de la police par 0,5, rendement s. Théoriquement, les erreurs d'arrondi pourrait causer un écart minimal par rapport à de tels processus, mais une multiplication par 2 et 0,5 peut être supposé pour être exact dans les ordinateurs.

Answer 3

Il serait .5 fois le 2em de l'élément h1 dans le contexte.

À force d'être par rapport à la 16px, vous devez définir le parent de h1 à font-size 16px premier.

.wrapper{font-size:16px;} h1 { font-size: 2em; } .petit { font-size: 0.5 em; }

<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>

DONC dans ce cas,

• wrapper a une taille de police de 16px
• h1 a une taille de police de 2em de 16px
• span.plus petit a une taille de police de cadratin (1 em (d' .wrapper hérité de h1 (.5em de 2em)) de 16px

Notez que em est une mesure relative du contexte qui est théoriquement fondée sur la M hauteur des caractères dans la police courante. À tous égards, alors h1 est un 32px taille et la durée.plus petit a un 16px taille.

Answer 4

Il dépend de l'élément parent de la taille de pixel. Si votre parent de l'élément taille de pixel est 16px

.5em sera égale à la moitié de votre base de pixels de sorte qu'il sera 8px et 2em pour h1 sera égale à 32px.

Tout dépend de la façon dont vous avez configuré le parent de l'élément taille de pixel dans votre CSS.

http://pxtoem.com/