Dimensione carattere in CSS -% o em?

Question

Quando devo impostare la dimensione dei caratteri nei CSS, dovrei usare un valore percentuale (% ) o em ? Puoi spiegarci il vantaggio?

Answer 1

C'è un ottimo articolo sulla tipografia web su A List Apart .

La loro conclusione:

  

Dimensionamento del testo e dell'altezza della linea in ems,   con una percentuale specificata su   corpo (e un avvertimento opzionale per   Safari 2), ha dimostrato di fornire   testo accurato e ridimensionabile su tutti   browser di uso comune oggi. Questo è   una tecnica che puoi mettere nel tuo kit   borsa e uso come best practice per   dimensionamento del testo nei CSS che soddisfa entrambi   designer e lettori.

Answer 2

Da http://archivist.incutio.com/viewlist/css-discuss/1408

  

%: alcuni browser non gestiscono   percentuale per la dimensione del carattere ma interpreta   150% come 150px. (Alcune versioni di NN4,   per esempio.) Anche IE ha dei problemi   con percentuale sugli elementi nidificati. esso   sembra che IE usi la percentuale relativa a   viewport anziché rispetto a   elemento genitore. Ancora un altro problema   (sebbene corretto secondo il W3C   specifiche), in Moz / Ns6, non è possibile utilizzare   percentuale relativa agli elementi con n   altezza / larghezza specificate.

     

em: a volte i browser usano gli errori   dimensione di riferimento, ma del relativo   unità è quella con il minimo   i problemi. Potresti trovarlo   interpretato come px a volte però.

     

pt: differisce notevolmente tra   risoluzioni e non dovrebbero essere utilizzate   per la visualizzazione. È abbastanza sicuro per   uso della stampa però.

     

px: l'unica unità assoluta affidabile attiva   schermo. Potrebbe essere sbagliato   interpretato in stampa però, come uno   punto di solito sono costituiti da diversi   pixel, e quindi tutto diventa   ridicolmente piccolo.   

Answer 3

Entrambi regolano la dimensione del carattere rispetto a quello che era. 1.5em è uguale al 150%. L'unico vantaggio sembra essere la leggibilità, scegli quello con cui ti senti più a tuo agio.

Answer 4

Dato che (quasi?) tutti i browser ora ridimensionano la pagina nel suo insieme, piuttosto che solo il testo, problemi precedenti con px vs. % vs. em in termini di ridimensionamento dei caratteri accessibili sono piuttosto discutibili.

Quindi, la risposta è che probabilmente non importa. Usa tutto ciò che funziona per te.

  

% è utile perché consente il ridimensionamento relativo.

     

px è carino perché è abbastanza facile gestire le aspettative quando lo si utilizza.

     

em può essere utile quando utilizzato anche per elementi di layout in quanto consente un dimensionamento proporzionale relativo alla dimensione del testo.

Answer 5

La vera differenza appare evidente quando la usi non per le dimensioni dei caratteri. L'impostazione di un padding di 1em non è la stessa di 100% . em è sempre relativo alla dimensione del carattere. Ma % potrebbe essere relativo alla dimensione del carattere, larghezza, altezza e probabilmente altre cose che non conosco.

Answer 6

Riguardo alla differenza tra le unità css % e em .

Per quanto ho capito (almeno teoricamente / concettualmente, ma forse non come queste due unità potrebbero essere implementate nei browser) queste due unità sono equivalenti, cioè se moltiplichi il tuo valore em con < codice> 100 e quindi sostituire em con % dovrebbe essere la stessa cosa?

Se in realtà c'è una vera differenza tra em e%, qualcuno può spiegarlo (o fornire un collegamento a una spiegazione)?

(Volevo aggiungere questo mio commento a cui apparteneva, ovvero rientrare appena sotto la risposta di " Liam, ha risposto il 25 settembre 08 alle 11: 21 " poiché voglio anche sapere perché la sua risposta è stata sottovalutata, ma non sono riuscito a capire come inserire il mio commento lì e quindi ho dovuto scrivere questa "discussione globale" risposta)

Answer 7

Come accenna Galeno, px è il più affidabile per la tipografia web, poiché tutto il resto che fai sulla pagina è per lo più definito in riferimento al monitor di un computer. Il problema delle dimensioni assolute è che alcuni browser (IE) non ridimensionano gli elementi di valore pixel in una pagina Web, quindi quando si tenta di ingrandire in / out, tutto si adatta tranne quegli elementi.

Non so se IE8 lo gestisca correttamente, ma tutti gli altri produttori di browser gestiscono bene i pixel ed è ancora un caso di minoranza in cui un utente deve ingrandire / ridurre il testo (questa casella di testo su SO forse è l'eccezione). Se vuoi sporcarti davvero, puoi sempre aggiungere una funzione javascript per aumentare le dimensioni del testo e offrire un "piccolo" "/" più grande " pulsante all'utente.

Answer 8

Libreria dell'interfaccia utente di Yahoo ( http://developer.yahoo.com/yui/ ) ha un bel set di classi css di base usate per " reset " le impostazioni specifiche del browser in modo che la base per la visualizzazione del sito sia la stessa per tutti i browser (supportati).

Con YUI si suppone di utilizzare le percentuali.