2011-07-31 13 views
10

Ho notato che è possibile utilizzare 1em e avrà un aspetto diverso su diversi siti.Come viene calcolato un em?

Che cos'è un em in proporzione a?

  • Il carattere utilizzato?
  • La dimensione del carattere più grande?
  • La larghezza/altezza della pagina?

risposta

12

Vedi http://w3schools.com/cssref/css_units.asp

1em è uguale alla dimensione del font corrente. 2em significa 2 volte la dimensione di il carattere corrente. Ad esempio, se un elemento viene visualizzato con un carattere di 12 pt, quindi '2em' è 24 pt. Il 'em' è un'unità molto utile in CSS, poiché può adattarsi automaticamente al carattere che il lettore utilizza

Un EM è rispetto all'elemento corrente è definita. Se si utilizzano dimensioni relative (come 0.9em), si moltiplicano e possono portare a dimensioni impreviste.

Ora, la dimensione predefinita di un font è non standard tra i browser. E c'è un problema con IE (almeno IE meno recente) quando si imposta il font su una specifica unità pixel. A good overview for font sizing can be found on A List Apart.

+0

Se si desidera utilizzare dimensioni relative, ma ma più coerenza, provare a utilizzare 'rem' invece, che si riferisce alla dimensione del font di default sull'elemento' html': https://www.sitepoint.com/understanding-and-using-rem-units-in-css/ – Avishai

2

L'em è definito come l'altezza della lettera maiuscola "M" nel carattere e nella dimensione correnti.

https://web.archive.org/web/20131127083352/http://www.guistuff.com/css/css_units.html

+0

-, il collegamento sembra essere offline - ecco perché l'essenza di un articolo collegato deve essere inclusa nella risposta stessa. –

+0

@AndreasNiedermair: Grazie per avermelo fatto notare! L'ho sostituito con una copia archiviata. Nota che la mia risposta include già l'essenza dell'articolo collegato rispetto alla domanda originale da parte del richiedente. – a3nm

3

Secondo W3C un em:.

"è uguale al valore calcolato della 'font-size' dell'elemento sul quale viene utilizzato L'eccezione è quando 'em 'si verifica nel valore della proprietà' font-size 'stessa, nel qual caso si riferisce alla dimensione del font dell'elemento genitore. "

In altre parole, gli em non hanno una dimensione assoluta. Assumono i loro valori dimensionali in base a dove si trovano. Per la maggior parte dei Web designer, questo significa che si trovano in un browser Web, quindi un font che è alto 1em ha esattamente le stesse dimensioni della dimensione predefinita per quel browser.

Per la maggior parte dei browser, valore di default 1em = 16px

Problemi correlati