Px vs. Em vs. Rem: quale unità CSS dovresti usare?

Imparerai alcune unità CSS per personalizzare la dimensione del carattere del testo durante la creazione di pagine web. Ci sono molte unità come pt, pc, ex, ecc., ma nella maggior parte dei casi dovresti concentrarti sulle tre unità più popolari: px, em e rem. Molti sviluppatori di solito non capiscono quali siano le differenze tra queste unità; quindi, di seguito è una spiegazione dettagliata di queste unità.

Prima di procedere, si noti che esistono due tipi di unità di lunghezza: assoluto E parente.

Lunghezze assolute

Le unità di lunghezza assolute sono fisse e una lunghezza espressa in una qualsiasi di queste apparirà esattamente come quella dimensione.

Le unità di lunghezza assoluta non sono consigliate per l'uso sullo schermo, perché le dimensioni dello schermo variano molto. Tuttavia, possono essere utilizzati se il supporto di output è noto, ad esempio per un layout stampato.

Lunghezze relative

Le unità di lunghezza relativa specificano una lunghezza relativa a un'altra proprietà di lunghezza. Le unità di lunghezza relativa si ridimensionano meglio tra diversi supporti di rendering.

1. Pixel (pixel)

Pixel è probabilmente l'unità più utilizzata nei CSS e sono molto popolari quando si tratta di impostare la dimensione del carattere del testo nelle pagine web. Un pixel (1px) è definito come 1/96 di pollice nei supporti di stampa.

Sugli schermi dei computer, tuttavia, di solito non sono correlati a misure effettive come centimetri e pollici come potresti pensare; sono solo definiti per essere piccoli ma visibili. Ciò che è considerato visibile dipende dal dispositivo.

Dispositivi diversi hanno un numero diverso di pixel per pollice sui loro schermi, che è noto come densità di pixel. Se utilizzassi il numero di pixel fisici sullo schermo di un dispositivo per determinare la dimensione del contenuto su quel dispositivo, avresti problemi a far sembrare le cose uguali su schermi di tutte le dimensioni.

È qui che entra in gioco il rapporto pixel del dispositivo. È essenzialmente solo un modo per calcolare quanto spazio occuperà un pixel CSS (1px) sullo schermo del dispositivo che gli consentirà di avere le stesse dimensioni rispetto a un altro dispositivo.

Di seguito è riportato un esempio:-

<classe div="contenitore">
<div>
<h1>Questo è un paragrafo</h1>
<P>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omni a! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure impedit assumenda distintio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</P>
</div>
</div>

.contenitore {
 larghezza: 100%;
 altezza: 100 vh;
 display: flessibile;
 giustifica-contenuto: centro;
 align-items: centro;
}
.contenitorediv {
 larghezza massima: 500px;
 imbottitura: 5px 20px;
 bordo: 1px solido grigio;
 raggio del bordo: 10px;
}
P {
 dimensione carattere: 16px;
}

produzione

La casella in alto è come appare quando viene visualizzata su uno schermo più grande come un laptop, e la casella in basso è come appare quando viene visualizzato su uno schermo più piccolo, come un telefono.

Nota come il testo in entrambe le caselle è della stessa dimensione, questo è fondamentalmente come funziona il pixel. Aiuta i contenuti Web (non solo il testo) ad avere le stesse dimensioni su tutti i dispositivi.

2. Em (M)

L'unità em prende il nome dalla lettera maiuscola 'M' (em) poiché la maggior parte delle unità CSS proviene dalla tipografia. Utilizza la dimensione del carattere corrente dell'elemento genitore come base. Può essere utilizzato per ingrandire o ridurre la dimensione del carattere di un elemento in base alla dimensione del carattere ereditata dal genitore.

Supponiamo che tu abbia un div genitore con una dimensione del carattere di 16px. Se crei un elemento di paragrafo in quel div e gli dai una dimensione del carattere di 1em, la dimensione del carattere del paragrafo sarà 16px.

Tuttavia, se dai a un altro paragrafo la dimensione del carattere di 2em che si tradurrà in 32px. Considera l'esempio seguente:

<classe div="div-uno">
<classe p="uno-em">1 em basato su 10px</P>
<classe p="due em">2 em basato su 10px</P>
</div>
<classe div="div-due">
<classe p="uno-em">1 em basato su 10px</P>
<classe p="due em">2 em basato su 10px</P>
</div>
</div>

.div-uno {
 dimensione carattere: 15px;
}
.div-due {
 dimensione carattere: 20px;
}
.uno-em {
 dimensione carattere: 1em;
}
.due-em {
 dimensione carattere: 2em;
}

produzione

Puoi vedere come em può aumentare la dimensione del testo e come è influenzato dalla dimensione del carattere corrente ereditata dal contenitore principale. Non è consigliabile usarli, specialmente all'interno di pagine strutturate complesse.

Se non utilizzato correttamente, potresti incorrere in problemi di ridimensionamento in cui gli elementi potrebbero non essere dimensionati correttamente in base a una complessa ereditarietà di dimensioni nell'albero DOM.

3. Rem (radice Em)

Rem funziona quasi allo stesso modo di em, ma la differenza principale è che rem fa riferimento solo alla dimensione del carattere dell'elemento radice sulla pagina piuttosto che alla dimensione del carattere del genitore. La dimensione del carattere principale è la dimensione del carattere predefinita specificata dall'utente nelle impostazioni del browser o da te, lo sviluppatore.

La dimensione del carattere predefinita di un browser web è solitamente 16px, quindi 1rem sarà 16px e 2rem sarà 32px. Tuttavia, nel caso in cui la dimensione del carattere principale venga modificata, ad esempio, in 10px; 1rem sarà 10px e 2rem sarà 20px.

Ecco un esempio per rendere le cose più chiare:

<classe div="div-uno">
<!-- EM -->
<classe p="uno-em">1 em basato sul contenitore (40px)</P>
<classe p="due em">2 em basati sul contenitore (40px)</P>
<!-- REM -->
<classe p="un-rem">1 rem basato su root (16px)</P>
<classe p="due rem">2 rem basato su root (16px)</P>
</div>

.div-uno {
 dimensione carattere: 40px;
}
.uno-em {
 dimensione carattere: 1em;
}
.due-em {
 dimensione carattere: 2em;
}
.one-rem {
 dimensione carattere: 1rem;
}
.due rem {
 dimensione carattere: 2rem;
}

produzione

Come puoi vedere, i paragrafi definiti con unità REM sono completamente indisturbati dalla dimensione del carattere dichiarata nel nostro contenitore e sono rigorosamente resi relativi al dimensione del font root definita nel selettore di elementi HTML.

Px vs. Em vs. Rem: quale unità è la migliore?

Em non è consigliato a causa della possibilità di avere una complessa gerarchia di elementi nidificati. REM viene solitamente ridimensionato in modo appropriato con la nuova dimensione del carattere predefinita/di base specificata nelle impostazioni del browser rispetto a PX. Questo spiega perché dovresti usare REM quando lavori con i contenuti di testo sulle tue pagine web. REM vince la gara. Uno stile migliore e il ridimensionamento dei tuoi contenuti con REM aggiungono fascino al tuo sito in quanto è l'ideale per i creatori di siti web. Le misurazioni puntuali dei tuoi contenuti detteranno l'aspetto del tuo sito web, tuttavia, dovrai essere creativo.