In questo esempio:Qual è il contesto di em?
IL CSS
h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }
IL HTML
<h1>Hi, I am a <span class="smaller">toad</span></h1>
Sarà la parola "rospo" essere 0,5 volte 16px (del browser standard font-size) o sarà 0,5 volte 2em (la dimensione del carattere della h1)?
È uguale al valore calcolato della proprietà 'font-size' dell'elemento su cui viene utilizzato. L'ereditarietà scorre lungo l'albero dei documenti.
Per rispondere alla tua domanda, sarebbe 0,5 volte il 2em, che a sua volta sarebbe 2 volte qualunque sia la dimensione del font del genitore di h1. phew.
E 'anche importante notare che se si utilizza em su altre proprietà CSS, per esempio, o widthheight, il risultato sarà calcolato dal calcolata font-size di qualsiasi elemento si applica il width o height a, ecc ...
Il seguente articolo descrive l'utilizzo e il contesto dell'unità em piuttosto bene a mio parere, insieme ad altri materiali di lettura e risorse ... Le unità rem potrebbero interessarti anche un po '.
Potrebbe piacerti anche per vedere questo violino per vedere come si comporta un po 'più chiaro:
E 'solo la proprietà' font-size 'calcolata dell'elemento su cui viene usata se è usata con qualche altra proprietà. Se è usato su "font-size", allora fa riferimento alla dimensione del font * del padre * calcolato per il proprio calcolo. – BoltClock
Realisticamente, non è necessariamente il genitore, è solo ciò che eredita, per esempio, se il corpo ha 'font-size' impostato su '16px', e hai nidificato 5 div all'interno dell'altro e sull'ultimo il carattere -size impostato su '2em', il suo risultato' font-size' risultante sarebbe '32px'. – Seer
Beh, sì. In entrambi i casi è lo stesso poiché, come hai detto, l'ereditarietà scorre il doctree da genitore a figlio. – BoltClock
Sarebbe essere .5 volte il 2em di t he h1 elemento nel contesto.
Per forzarlo rispetto al 16px, è necessario impostare prima il genitore di h1 in font 16px.
. Wrapper {font-size: 16px;} h1 {font-size: 2em; } .smaller {font-size: 0.5em; }
<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>
SO in questo caso,
Si noti che em è una misura relativa dal contesto che è nominalmente basato su l'altezza dei caratteri M nel carattere corrente.Per tutti gli effetti, h1 ha una dimensione di 32 px e span.smaller ha una dimensione di 16 px.
oppure potresti usare le unità 'rem' invece di' em' per essere relative alla base del browser 'font-size' (con tutti i problemi di supporto del browser ovviamente) – Luca
@Luca - sì, il problema del supporto è il motivo per cui css "reset" esiste e viene utilizzato spesso in modo che il "punto di partenza" sia un valore più coerente previsto. –
sì, è sicuramente un punto valido generale, mi riferivo principalmente a questo: http://caniuse.com/rem (come al solito IE si mette in mezzo!) – Luca
Dipende dalla dimensione del pixel dell'elemento genitore. Se il genitore dimensione di elemento pixel è 16px
.5em sarà pari alla metà del pixel di base in modo che sia 8px e 2em per h1 sarà uguale a 32px.
Tutto dipende da come è stata impostata la dimensione del pixel dell'elemento principale nel CSS.
No. Si basa sulla dimensione del font calcolato dell'elemento genitore, non sulla dimensione del carattere del corpo. – Quentin
@Quentin: anch'io intendo la dimensione del genitore. Non ho detto il corpo. Editare la base sul genitore. – defau1t
Ma in questo caso la dimensione del carattere dei genitori in pixel, non è vero? –
Il em unit indica la dimensione del font dell'elemento, salvo quando viene utilizzato il valore della proprietà font-size, dove indica la dimensione del font dell'elemento genitore. In questo senso, nel caso presentato, il contesto è l'elemento genitore.
Nel caso presentato, la dimensione del carattere della parola "rospo" è quindi uguale alla dimensione del carattere del genitore dello h1. Nessun valore specifico per esso può essere dedotto dai dati forniti.
Quando si calcola la dimensione del carattere, la dimensione del carattere del genitore di h1 è stata calcolata quando questo costrutto sarà trattato; chiamiamolo s. Per prima cosa viene calcolata la dimensione del font h1, moltiplicando s (la dimensione del font del genitore) per 2. Quindi viene calcolata la dimensione del font dell'elemento span moltiplicando la dimensione del font del genitore per 0.5, ottenendo s. Teoricamente, gli errori di arrotondamento potrebbero causare una deviazione minima in tali processi, ma la moltiplicazione per 2 e 0,5 può essere considerata esatta nei computer.
Questo mi fa male il cervello. – Jefferson
Yikes, BUONA domanda! Mi fa male il cervello! – evilscary
Non sono sicuro di come questa domanda sia correlata a RWD. – BoltClock