1em a quanti pixel corrisponde?

[Graboid]

Facendo delle prove sono giunto alla conclusione che di default su IE e Firefox un em corrisponde a 16 pixel.

Sbaglio?

Insomma se io voglio un titolo alto 48 px devo mettergli nel foglio di stile 3em?


Altra cosa che non capisco:

in firefox la dimensione carattere standard e' impostata a 16 di default ma a schermo i caratri sono alti 11px.
ma allora quel 16 a cosa si riferisce se non sono pixel? E come mai mettendo 3em la scritta viene alta giusto 48 px come se quel 16 si riferisse ai pixel?

:master:

[Mich_]

Non e` competamente giusto quello che scrivi.

Anzitutto non c'e` scritto da nessuna parte che 1em in altezza sia uguale ad 1em in larghezza.

1em corrisponde alla dimensione della lettera M.
Quindi dipende dalla grandezza del font.
Se premi control+, automaticamente 1em diventa piu` grande.
E se sei in un blocco in cui hai definito font-size: smaller; il tuo em e` automaticamente piu` piccolo.
E se in un brwoser c'e` definita una grandezza minima del carattere, il tuo em non va sotto una certa soglia.

Andare a confrontare l'em con i px e` una fatica inutile: ogni browser e ogni utente ha settato il suo.

[Graboid]

Quindi e' impossibile avere un titolo alto 48 px mettendo le misure in em.
Speravo che tutti i browser di default avessero 16px per i caratteri.

Mi piacerebbe cmq approfondire l'argomento.

C'e' qualcuno che ha qualcos'altro da dire?

[Mich_]

Se vuoi un blocco alto 48 px, basta che usi dimensioni in px.
Pero` poi non lamentarti se qualcuno non riesce a leggere, o se le scritte spariscono in parte.

Il bello dei CSS e` che ci sono varie unita` di misura, adatte per i vari scopi.
Ad esempio se vuoi contenere delle immagini, conviene usare misure in px; se invece vuoi contenere testo, la soluzione migliore e` l'uso di em, dato che non hai modo di conoscere le dimensioni dei font nel browser dell'utente.

Mi par di ricordare che nei tutorial sui CSS, questo argomento sia affrontato. Ti conviene cercarlo li`.

[pierofix]

Originariamente inviato da Graboid
Mi piacerebbe cmq approfondire l'argomento.

Ho trovato questi:

- http://24ways.org/advent/an-explanation-of-ems
- www.w3.org/WAI/GL/css2em.htm

Credo comunque che basti una breve ricerca con Google per trovare informazioni più dettagliate.

[Graboid]

Grazie di spiegazione e link.

Mi sono chiarito le idee

Ciao