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 affermare che l'una è una scelta migliore dell'altra (o entrambe non avrebbero avuto il proprio scopo nelle specifiche). Potrebbe anche valere la pena notare che StackOverflow fa ampio uso delle unità px. Non è la cattiva scelta che a Spoike è stato detto di si.

Definizione di unità

• px è un'unità di misura assoluta (come in , pt o cm ) che risulta essere anche 1/96 di un in unità (più dopo il perché). Poiché si tratta di una misura assoluta, può essere utilizzata ogni volta che si desidera definire qualcosa di una dimensione particolare, anziché 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 vengono ridimensionate in base alla larghezza della finestra del browser. Pertanto, se l'intero design della tua pagina utilizza unità assolute come px anziché % , non si adatterà alla larghezza del browser. Questo non è intrinsecamente buono o cattivo, solo una scelta che il designer deve fare tra aderire a una dimensione esatta ed essere inflessibile rispetto allo stiramento, ma nel frattempo non aderire a una dimensione esatta. Sarebbe tipico per un sito avere un mix di oggetti di dimensioni fisse e flessibili.

  Gli elementi a dimensione fissa spesso devono essere incorporati nella pagina, come banner pubblicitari, loghi o icone. Questo ti assicura quasi sempre di aver bisogno almeno di alcune misurazioni basate su px in un progetto. Le immagini, ad esempio, verranno ridimensionate (per impostazione predefinita) in modo tale che ogni pixel abbia una dimensione 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 ha più senso usare le unità px per la maggior parte degli schermi.

  Tutte le misure assolute sono rigidamente correlate tra loro; cioè 1in è sempre 96px , così come 1in è sempre 72pt . (Si noti che 1in non è quasi mai un pollice fisico quando si parla di media basati su schermo). Tutte le misurazioni assolute assumono una risoluzione dello schermo nominale di 96ppi e una distanza di visualizzazione nominale di un monitor desktop e su tale schermo un px sarà uguale a un pixel fisico sullo schermo e uno insarà 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 sarà più necessariamente correlato ai pixel fisici.

• em non è un'unità assoluta - è un'unità relativa alla dimensione del carattere 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 ), ciò sarà influenzato dalla scelta dei caratteri nel browser o nel sistema operativo dell'utente se ne hanno fatto uno, quindi non ha senso per utilizzarli come unità di lunghezza generale, tranne nei casi in cui si desidera ridimensionarli in base alle dimensioni del carattere.

  Usa em quando vuoi specificamente 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 padre. Sono una buona alternativa alle unità px per cose come la larghezza totale di un disegno se il tuo disegno non si basa su dimensioni pixel specifiche per impostarne le dimensioni.

  L'uso di % unità nel tuo disegno 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 piccolo laptop ad alta risoluzione e devo eseguire Firefox con uno zoom del 120% per poter leggere senza strizzare gli occhi.

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

Nota come si sovrappongono i pulsanti in alto e le schede della pagina. Se avessero usato unità em anziché px, non ci sarebbe stato un problema.

Il motivo per cui ho posto questa domanda è che ho dimenticato come usarli perché da un po 'stavo hackerando felicemente nei CSS. La gente non si è accorta che ho mantenuto la domanda generale perché non parlavo di dimensionamento dei caratteri in sé. Ero più interessato a come definire gli stili su un dato elemento di blocco nella pagina.

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

Utilizzo di px per definire la larghezza

Ecco un esempio illustrativo. Supponiamo che abbiamo un div-tag che vogliamo trasformare in una elegante casella di data, potremmo avere un codice HTML simile al seguente:

<div class="date-box">
    <p class="month">July</p>
    <p class="day">4</p>
</div>

Una semplice implementazione definirebbe la larghezza della date-boxclasse 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 interromperà. Il testo uscirà anche 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à della stessa larghezza in cui è bloccata 50px.

Usandoli invece

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 hai un design fluido nella casella della data, ovvero la casella verrà ridimensionata insieme al testo in proporzione alla dimensione del carattere definita per la casella della data. In questo esempio, la dimensione del carattere è definita *come 10pt e ridimensionerà 2,5 volte a quella dimensione del carattere. Pertanto, quando si dimensionano i caratteri nel browser, la casella avrà una dimensione 2,5 volte superiore a quella dimensione del carattere.

La parte superiore ha votato risposta qui da thomasrutter è proprio nella sua risposta circa l' em . Ma è molto molto sbagliato sulla dimensione di un pixel. Quindi, anche se è vecchio, non posso lasciarlo indifferente.

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

Un pixel NON ha una dimensione fisica fissa.
(Sì, è riparato in una sola schermata, ma nella schermata successiva un pixel è molto 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. Sono 10 pollici? No..?
Collega il tuo laptop alla TV. La linea è ora di 10 pollici? Ancora non?
Mostra la linea sul tuo iPhone. Sempre delle 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 ridimensionare in base alla dimensione del carattere.

È particolarmente utile sui browser che implementano lo zoom ridimensionando la dimensione del carattere. Quindi, se ridimensioni tutti i tuoi elementi usando emquesti si adattano di conseguenza.

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

Questo porta a due cose (correlate):

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

esempio:

Codice: body {font-size: 10px;} // mantenere su 10 tutte le dimensioni in basso corrette, cambiare questo valore e il resto cambia in 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 in body il resto cambia automaticamente per essere una specie 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 ti consente di ridimensionare il carattere se è specificato usando px, mentre lo fa se usi un'unità relativa come em o percentuali. Non consentire all'utente di ridimensionare il carattere è molto male per l'accessibilità. Anche se è in declino, ci sono ancora molti utenti di IE 6 là fuori.

usa px per un posizionamento preciso degli elementi grafici. usali per le misurazioni dovendo posizionare e spaziare attorno ad elementi di testo come l'altezza delle linee, ecc. px è preciso al pixel, può cambiare dinamicamente con il font in uso

Il motivo principale dell'utilizzo di em o percentuali è consentire all'utente di modificare le dimensioni del testo senza interrompere il disegno. Se si progetta con caratteri specificati in px, non cambiano dimensione (in IE 6 e altri) se l'utente sceglie la dimensione del testo - più grande . Questo è molto male per gli utenti con handicap visivi.

Per diversi esempi e articoli su disegni come questo (ce ne sono una miriade tra cui scegliere), vedi l'ultimo numero di A List Apart: Fluid Grids , l'articolo più vecchio Come dimensionare il testo in CSS o Dan Bulletproof Web Design di Dan Cederholm .

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

Per quanto disprezzo personalmente IE6, attualmente è l' unico browser approvato per la maggior parte degli utenti della nostra società Fortune 200.

Esiste una soluzione semplice se si desidera utilizzare px per specificare la dimensione del carattere, ma si desidera comunque l'utilizzabilità fornita inserendola nel file CSS:

body {
  font-size: 62.5%;
}

Ora specifica tu p(e altri) tag 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.

Probabilmente vuoi usarli per le dimensioni dei caratteri fino a quando IE6 non sarà più (dal tuo sito). Px andrà bene quando lo zoom della pagina (al contrario dello zoom del testo) diventerà il comportamento standard.

Traingamer ha già fornito i collegamenti necessari .

Il pixel è un'unità assoluta mentre i rem / em sono unità relative. Per di più: https://drafts.csswg.org/css-values-3/

È necessario utilizzare l'unità relativa quando si desidera che la dimensione del carattere sia adattiva in base alla dimensione del carattere del sistema poiché il sistema fornisce il valore della dimensione del carattere all'elemento radice che è l'elemento HTML.

In questo caso, dove la pagina Web è aperta in Google Chrome, la dimensione del carattere per l'elemento HTML è impostata da Chrome, prova a cambiarla per vedere l'effetto sulle pagine Web con caratteri di unità rem / em.

Se si utilizza pxcome unità per i caratteri, i caratteri non verranno ridimensionati mentre i caratteri con rem/em unità verranno ridimensionati quando si modificano le dimensioni del carattere del sistema.

Quindi utilizzare pxquando si desidera che le dimensioni siano fisse e utilizzare rem/ emquando si desidera che le dimensioni siano adattive / dinamiche alle dimensioni del sistema.

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

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

Evita em o px usa rem invece perché è più facile trovare il valore calcolato. Ma tra em e px, px è migliore perché è difficile eseguire il debug.