Perché em invece di px?

Ho sentito che dovresti definire dimensioni e distanze nel tuo foglio di stile con em anziché in pixel. Quindi la domanda è: perché dovrei usare em invece di px quando definisco gli stili in css? C’è un buon esempio che illustra questo?

È sbagliato dire che uno è una scelta migliore rispetto all’altro (o entrambi non avrebbero avuto il loro scopo nello specifico). Potrebbe anche valere la pena notare che StackOverflow fa ampio uso di unità px. Non è stata la scarsa scelta che a Spoike è stato detto.

Definizione di unità

  • px è un’unità di misura assoluta (come in , pt o cm ) che è anche 1/96 di un’unità in (più sul perché in seguito). Poiché è una misura assoluta, può essere utilizzata ogni volta che si desidera definire qualcosa come una dimensione particolare, piuttosto che essere proporzionale a qualcos’altro come la dimensione della finestra del browser o la dimensione del carattere.

    Come tutte le altre unità assolute, le unità px non si scalano in base alla larghezza della finestra del browser. Pertanto, se l’intera struttura della pagina utilizza unità assolute come px anziché % , non si adatta alla larghezza del browser. Questo non è intrinsecamente buono o cattivo, ma solo una scelta che il progettista deve fare tra aderire a una dimensione esatta e essere inflessibile rispetto allo stretching ma nel processo che non aderisce a una dimensione esatta. Sarebbe tipico per un sito avere un mix di oggetti di dimensioni fisse e di dimensioni flessibili.

    Gli elementi di dimensioni fisse spesso devono essere incorporati nella pagina, come banner pubblicitari, loghi o icone. Ciò garantisce quasi sempre la necessità di almeno alcune misurazioni basate su px in un progetto. Le immagini, ad esempio, saranno (di default) ridimensionate in modo tale che ogni pixel abbia dimensioni di 1 * px *, quindi se stai progettando intorno a un’immagine avrai bisogno di unità px . È anche molto utile per il dimensionamento preciso dei caratteri e per le larghezze dei bordi, dove a causa dell’arrotondamento è più sensato utilizzare le unità px per la maggior parte degli schermi.

    Tutte le misure assolute sono rigidamente correlate l’una all’altra; cioè, 1in è sempre 96px , proprio come 1in è sempre 72pt . (Si noti che 1in non è quasi mai un pollice fisico quando si parla di media basati sullo schermo). Tutte le misurazioni assolute presuppongono una risoluzione dello schermo nominale di 96ppi e una distanza di visione nominale di un monitor desktop, e su tale schermo un px sarà uguale a un pixel fisico sullo schermo e uno sarà uguale a 96 pixel fisici. Sugli schermi che differiscono in modo significativo nella densità dei pixel o nella distanza di visualizzazione, o se l’utente ha ingrandito la pagina utilizzando la funzione di zoom del browser, px non si riferirà più necessariamente ai pixel fisici.

  • em non è un’unità assoluta – è un’unità che è relativa alla dimensione del font attualmente selezionata. A meno che tu non abbia sovrascritto lo stile del carattere impostando la dimensione del carattere con un’unità assoluta (come px o pt ), questo sarà influenzato dalla scelta dei caratteri nel browser o nel SO dell’utente se ne hanno fatto uno, quindi non ha senso per usare em come unità di lunghezza generale eccetto dove si desidera che venga ridimensionato in modo specifico quando la dimensione del font viene ridimensionata.

    Usalo quando vuoi che la dimensione di qualcosa dipenda dalla dimensione del carattere corrente.

  • % è anche un’unità relativa, in questo caso, relativa all’altezza o alla larghezza di un elemento genitore. Sono una buona alternativa alle unità px per cose come la larghezza totale di un disegno se il tuo progetto non si basa su dimensioni di pixel specifici per impostarne le dimensioni.

    L’utilizzo di % unità nel tuo progetto consente al tuo disegno di adattarsi alla larghezza dello schermo / dispositivo, mentre l’uso di un’unità assoluta come px non lo fa.

Ho un laptop piccolo con una risoluzione elevata e devo eseguire Firefox con lo zoom del testo al 120% per poter leggere senza strabismo.

Molti siti hanno problemi con questo. Il layout diventa tutto confuso, il testo nei pulsanti viene tagliato a metà o scompare del tutto. Persino stackoverflow.com ne soffre:

Screenshot di Firefox con zoom del testo al 120%

Nota come i pulsanti superiori e le tabs delle pagine si sovrappongono. Se avessero usato unità em invece di px, non ci sarebbe stato un problema.

Il motivo per cui ho fatto questa domanda è stato che ho dimenticato come usare gli em perché era un po ‘che stavo hackerando felicemente nei CSS. La gente non si è accorta che ho mantenuto la domanda generale perché non stavo parlando del dimensionamento dei caratteri di per sé. Ero più interessato a come definire gli stili su ogni dato elemento di blocco sulla pagina.

Come Henrik Paul e altri hanno sottolineato che em è proporzionale alla dimensione del carattere utilizzata nell’elemento. È prassi comune definire le dimensioni sugli elementi di blocco in px, tuttavia, il dimensionamento dei caratteri nei browser di solito interrompe questo disegno. Il ridimensionamento dei caratteri viene comunemente eseguito con i tasti di scelta rapida Ctrl + + o Ctrl + - . Quindi una buona pratica è usare gli em invece.

Utilizzando px per definire la larghezza

Ecco un esempio illustrativo. Diciamo che abbiamo un tag div che vogliamo trasformare in una data box elegante, potremmo avere un codice HTML simile a questo:

July

4

Una semplice implementazione definirà la larghezza della class date-box in px:

 * { margin: 0; padding: 0; } p.month { font-size: 10pt; } p.day { font-size: 24pt; font-weight: bold; } div.date-box { background-color: #DD2222; font-family: Arial, sans-serif; color: white; width: 50px; } 

Il problema

Tuttavia, se vogliamo ridimensionare il testo nel nostro browser, il design si romperà. Anche il testo uscirà fuori dagli schemi, il che è quasi lo stesso di quello che succede con il design di SO, come sottolinea Flodin . Questo perché la scatola rimarrà delle stesse dimensioni in larghezza, poiché è bloccata a 50px .

Invece di usare em

Un modo più intelligente è invece definire la larghezza in ems:

 div.date-box { background-color: #DD2222; font-family: Arial, sans-serif; color: white; width: 2.5em; } * { margin: 0; padding: 0; font-size: 10pt; } // Initial width of date-box = 10 pt x 2.5 em = 25 pt // Will also work if you used px instead of pt 

In questo modo si ha un design fluido nella casella data, vale a dire che la casella si dimensionerà insieme al testo in proporzione alla dimensione del carattere definita per la casella data. In questo esempio, la dimensione del carattere è definita in * come 10pt e avrà una dimensione pari a 2,5 volte quella dimensione del carattere. Quindi quando ridimensionate i caratteri nel browser, la casella avrà 2,5 volte la dimensione di quella dimensione del font.

La risposta più votata qui da thomasrutter è giusta nella sua risposta a riguardo. Ma è molto sbagliato riguardo alle dimensioni di un pixel. Quindi, anche se è vecchio, non posso lasciare che sia indebito.

Lo schermo di un computer normalmente NON è 96 dpi! (O ppi, se vuoi essere pedante.)

Un pixel NON ha una dimensione fisica fissa.
(Sì, è fissato solo all’interno di uno schermo, ma nella schermata successiva un pixel è probabilmente più grande, o più piccolo, e certamente NON 1/96 di pollice.)

Prova
Disegna una linea lunga 960 pixel. Misuralo con un righello fisico. È 10 pollici? No..?
Collega il tuo laptop alla tua TV. La linea è di 10 pollici ora? Ancora non?
Mostra la linea sul tuo iPhone. Ha le stesse dimensioni? Perchè no?

Chi diavolo ha inventato il mito dello schermo del computer a 96 dpi?
(Alcune religioni operano con un mito di 72 dpi, ma ugualmente sbagliato).

È utile per tutto ciò che deve essere scalato in base alla dimensione del carattere.

È particolarmente utile sui browser che implementano lo zoom ridimensionando le dimensioni del carattere. Quindi, se ridimensionate tutti i vostri elementi usando em essi si adattano di conseguenza.

Perché em ( http://en.wikipedia.org/wiki/Em_(typography) ) è direttamente proporzionale alla dimensione del font attualmente in uso. Se la dimensione del font è, diciamo, 16 punti, un em è 16 punti. Se la dimensione del font è 16 pixel ( nota : non uguale a punti), un em è 16 pixel.

Questo porta a due cose (correlate):

  1. è facile mantenere le proporzioni, se in seguito si sceglie di modificare le dimensioni dei caratteri nel CSS.
  2. Molti browser supportano dimensioni personalizzate dei caratteri, ignorando il CSS. Se progetti tutto in pixel, il tuo layout potrebbe rompersi in questi casi. Ma, se usi ems, questi overriding dovrebbero mitigare questi problemi.

esempio:

Codice: body {font-size: 10px;} // mantenere 10 tutte le dimensioni corrette, cambiare questo valore e il resto cambia ad es. 1.4 di questo valore

1 {font-size: 1.2em;} // 12px

2 {font-size: 1.4em;} // 14px

3 {font-size: 1.6em;} // 16px

4 {font-size: 1.8em;} // 18px

5 {font-size: 2em;} // 20px

corpo

1

2

3

4

5

cambiando il valore nel corpo il resto cambia automaticamente per essere un tipo di volte il valore base …

10 × 2 = 20 10 × 1,6 = 16 ecc

potresti avere il valore base come 8px … quindi 8 × 2 = 16 8 × 1.6 = 12.8 // può essere arrotondato dal browser

Un motivo molto pratico è che IE 6 non consente di ridimensionare il carattere se è specificato utilizzando px, mentre lo fa se si utilizza un’unità relativa come em o percentuali. Non consentire all’utente di ridimensionare il carattere è molto brutto per l’accessibilità. Anche se è in declino, ci sono ancora molti utenti di IE 6.

usa px per il posizionamento preciso di elementi grafici. usa em per le misurazioni che devono fare il posizionamento e la spaziatura attorno agli elementi di testo come l’altezza della linea, ecc. px è pixel accurato, em può cambiare dynamicmente con il font in uso

Il motivo principale per l’utilizzo di em o percentuali è consentire all’utente di modificare le dimensioni del testo senza interrompere il progetto. Se progetti con caratteri specificati in px, essi non cambiano le dimensioni (in IE 6 e altri) se l’utente sceglie la dimensione del testo – più grande . Questo è molto negativo per gli utenti con handicap visivi.

Per diversi esempi e articoli su progetti come questo (ci sono una miriade di opzioni tra cui scegliere), vedere l’ultimo numero di A List Apart: Fluid Grids , l’articolo precedente Come dimensionare il testo in CSS o il Web design Bulletproof di Dan Cederholm.

Le tue immagini dovrebbero comunque essere visualizzate con dimensioni px, ma, in generale, non è considerata una buona forma per ridimensionare il tuo testo con px.

Per quanto io disprezzi personalmente IE6, attualmente è l’ unico browser approvato per la maggior parte degli utenti nella nostra società Fortune 200.

C’è una soluzione semplice se vuoi usare px per specificare la dimensione del font, ma vuoi comunque l’usabilità che em fornisce inserendo questo nel tuo file CSS:

 body { font-size: 62.5%; } 

Ora specifica i tag p (e altri) come questo:

 p { font-size: 0.8em; /* This is equal to 8px */ font-size: 1.0em; /* This is equal to 10px */ font-size: 1.2em; /* This is equal to 12px */ font-size: 2.0em; /* This is equal to 20px */ } 

E così via.

Per quello che vale, ecco la definizione per le diverse unità in CSS: http://www.w3.org/TR/css3-values/#lengths .

Probabilmente vorrai usare em per le dimensioni dei font fino a quando IE6 non sarà disponibile (dal tuo sito). Px andrà bene quando lo zoom della pagina (al contrario dello zoom del testo) diventa il comportamento standard.

Traingamer forniva già i link necessari .

Il consenso generale è di utilizzare percentuali per il dimensionamento dei caratteri, perché è più coerente tra browser e piattaforms.

È divertente, ho sempre usato pt per il dimensionamento dei caratteri e ho pensato che tutti i siti usassero quello. Normalmente non usi le dimensioni px in altre app (es. Word). Immagino sia perché sono per la stampa, ma le dimensioni sono le stesse in un browser come in Word …