Che cos'è un "em" se la dimensione del font del documento è specificata in ems?

Question

In CSS, lo em è un'unità relativa basata sulla dimensione del carattere del documento. Quindi, che cosa è esattamente un em quindi, se la dimensione del font del documento è misurata in ems? Supponiamo che diciamo:

<style type = "text/css"> 
body 
{ 
    font-size: 1em; 
} 
</style> 

Quindi, un em è ora ricorsivamente definito. Quindi come viene gestito dal browser?

Il W3C docs dire:

L'unità 'em' è uguale al valore calcolato della 'font-size' proprietà dell'elemento sul quale viene utilizzato. L'eccezione si verifica quando si trova nel valore della proprietà 'font-size', in cui si riferisce alla dimensione del carattere dell'elemento padre. Può essere utilizzato per la misurazione verticale o orizzontale. (Questa unità è anche talvolta chiamato il quad-width nei testi tipografici.)

Ma cosa succede se l'elemento è document.body, quindi non c'è alcun elemento padre?

Answer 1

body non è l'elemento radice del documento, si tratta di un malinteso molto comune. L'elemento principale di body è html, le cui dimensioni carattere predefinite corrispondono all'impostazione predefinita per la dimensione carattere del browser (in genere 16px).

Questo vale anche se si imposta un valore font-size in em on siabody e html. Quindi, se avete fatto queste cose:

html, body { font-size: 2em; } 

Poi, assumendo una dimensione predefinita di 16px come impostato dall'utente, html avrà una dimensione di carattere di 32px (due volte la dimensione del font di default) e body avrà una dimensione di carattere di 64px (due volte del suo genitore, html).

---

_{Per essere precisi, dimensione predefinita dell'elemento html è the initial value, medium, che secondo le specifiche corrisponde alla dimensione predefinita preferito come impostato dall'utente.}

Answer 2

Sarà relativo a qualunque sia la dimensione del carattere predefinito del browser, che sarà specificato in una dimensione fisica, ad es. '10pt'.

Answer 3

Ci vorrà il valore predefinito del browser di 16px se nessun elemento padre lo ha definito.

Vedi anche: http://pxtoem.com/