Guida completa quando utilizzare Em vs. Rem

È possibile che tu abbia fatto i conti con l'utilizzo di unità di misura flessibili, ma potresti comunque non capire completamente quando utilizzare rem e quando usare em. Questo tutorial ti aiuterà a capirlo!

Tutti e due em e rem sono unità flessibili e scalabili che vengono tradotte dal browser in valori di pixel, in base alle impostazioni della dimensione del carattere nel progetto. Se si utilizza un valore di 1em o 1rem, potrebbe tradurre nel browser come qualcosa da 16px a 160px o qualsiasi altro valore.

CSS padding impostato su 1em Calcola a 16 px CSS padding impostato su 1em Calcola a 160 px

D'altro canto px i valori sono usati dal browser così com'è, quindi 1px verrà sempre visualizzato esattamente 1px.

Prova il cursore su questo esempio di CodePen per vedere come il valore di rem e em le unità possono tradursi in valori di pixel diversi, mentre sono esplicitamente impostati px le unità rimangono fisse in dimensioni:

La grande domanda

utilizzando em e rem le unità ci danno flessibilità nei nostri progetti e la possibilità di scalare gli elementi su e giù, invece di rimanere bloccati con dimensioni fisse. Possiamo utilizzare questa flessibilità per rendere i nostri progetti più facili da regolare durante lo sviluppo, più reattivi e per consentire agli utenti del browser di controllare la scala globale dei siti per la massima leggibilità.

Tutti e due em e rem le unità forniscono questa flessibilità e funzionano in modo simile, quindi la grande domanda è, quando dovremmo usare em valori e quando dovremmo usare rem valori?

Differenza cruciale

La differenza tra em e rem unità è come il browser determina il px valore in cui si traducono. Comprendere questa differenza è la chiave per determinare quando utilizzare ciascuna unità.

Cominceremo andando oltre come rem e em le unità funzionano da zero per essere sicuri di conoscere ogni dettaglio. Poi passeremo a perché dovresti usare em o rem unità.

Infine esamineremo l'applicazione pratica di quali elementi di un tipico progetto dovresti utilizzare su ogni tipo di unità.

Come rem Unità Traduci valori in pixel

Quando si usa rem unità, la dimensione dei pixel che traducono dipende dalla dimensione del carattere dell'elemento radice della pagina, vale a dire il html elemento. Quella dimensione del carattere di root viene moltiplicata per qualunque numero tu stia usando con il tuo rem unità.

Ad esempio, con una dimensione del carattere dell'elemento radice di 16px, 10rem equivarrebbe a 160px, Ad esempio 10 x 16 = 160.

CSS padding impostato su 10rem Calcola a 160 px

Come em Unità Traduci valori in pixel

Quando si usa em unità, il valore del pixel che si ottiene è una moltiplicazione della dimensione del carattere sull'elemento che viene disegnato.

Ad esempio, se un div ha una dimensione del font di 18px, 10em equivarrebbe a 180px, Ad esempio 10 x 18 = 180.

Riempimento CSS impostato su 10em Calcola a 180 px (o abbastanza vicino)

Importante da sapere:

È un equivoco piuttosto diffuso che em le unità sono relative alla dimensione del carattere dell'elemento genitore. In effetti, secondo la specifica W3, sono relativi alla dimensione del carattere "dell'elemento su cui vengono utilizzati".

Dimensioni dei caratteri dell'elemento padre può effetto em valori, ma quando ciò accade è solo a causa dell'eredità. Diamo un'occhiata al perché e vediamo come funziona in azione.

L'effetto dell'eredità su em unità

Lavorando con em le unità possono iniziare a diventare complicate quando si tratta di ereditarietà, poiché ogni elemento eredita automaticamente la dimensione del carattere del suo genitore. L'effetto dell'ereditarietà può essere sovrascritto solo impostando esplicitamente una dimensione del carattere con un'unità non soggetta all'eredità, come px o vw.

La dimensione del carattere dell'elemento su cui em le unità utilizzate determinano le loro dimensioni. Ma quell'elemento può aver ereditato una dimensione del carattere dal suo genitore, che ha ereditato una dimensione del carattere dal suo genitore, e così via. Come tale è possibile per qualsiasi em valore che deve essere determinato dalla dimensione del font di uno dei suoi genitori.

Diamo un'occhiata a un esempio. Sentiti libero di provare questo in CodePen per te stesso mentre lo attraversiamo. Mentre vai avanti, utilizza Chrome Developer Tools o Firebug per Firefox per esaminare i valori dei pixel em le unità sono calcolate in.

Esempio di em Eredità

Se abbiamo una pagina con una dimensione del carattere di root di 16px (di solito il default) e un div bambino dentro con padding di 1.5em, quel div erediterà la dimensione del font di 16px dall'elemento radice. Quindi il suo riempimento si tradurrà in 24px, Ad esempio 1,5 x 16 = 24.

Allora cosa succede se avvolgiamo un altro div attorno al primo e impostiamo il suo dimensione del font a 1.25em?

Il nostro wrapper div eredita la dimensione del carattere di root di 16px e moltiplica quello per conto proprio dimensione del font impostazione di 1.25em. Questo imposta il div per avere una dimensione del font di 20px, cioè 1,25 x 16 = 20.

Ora il nostro div originale non eredita più direttamente dall'elemento radice, invece eredita una dimensione del font di 20px dal suo nuovo genitore div Il suo valore di imbottitura di 1.5em ora equivale a 30px, cioè 1,5 x 20 = 30.

Questo effetto di ridimensionamento può essere aggravato ulteriormente se aggiungiamo un em Diciamo che la dimensione del carattere è basata sul nostro div originale 1.2em.

Il div eredita il 20px dimensione del carattere dal suo genitore, quindi moltiplica per proprio 1.2em impostazione, dandogli una nuova dimensione del font di 24px, cioè 1,2 x 20 = 24.

Il 1.5em il riempimento sul nostro div ora cambierà di nuovo con la nuova dimensione del carattere, questa volta per 36px, cioè 1,5 x 24 = 36.

Infine, per illustrare ulteriormente questo em le unità sono relative alla dimensione del font dell'elemento su cui sono usate, (non l'elemento genitore), vediamo cosa succede al nostro padding di 1.5em se impostiamo esplicitamente il div per usare una dimensione del font di 14px, un valore non soggetto all'eredità.

Ora, il nostro padding è sceso a 21px, ovvero 1,5 x 14 = 21. Non è influenzato dalla dimensione del font dell'elemento genitore.

Con tutto questo potenziale di complicazioni, puoi capire perché è importante sapere come usarlo em unità in modo gestibile.

L'effetto delle impostazioni del browser sulla dimensione del carattere dell'elemento HTML

Di solito i browser hanno una dimensione del font di 16px, ma questo può essere cambiato da 9px a 72px dall'utente.

Importante da sapere:

La radice html l'elemento eredita la dimensione del carattere dalle impostazioni nel browser, a meno che non venga sostituito con un valore fisso impostato in modo esplicito.

Quindi, mentre la dimensione del carattere sul html l'elemento è ciò che determina direttamente rem valori, la dimensione del carattere potrebbe provenire dalle impostazioni del browser.

Pertanto le impostazioni della dimensione del carattere del browser possono influire sul valore di ogni rem unità utilizzata in un progetto, così come ogni em unità via ereditarietà.

Effetto di impostazione del browser quando non è impostata alcuna dimensione del carattere HTML

A meno che non venga superato, il html elemento erediterà qualunque sia l'impostazione della dimensione del carattere predefinita nel browser. Ad esempio, prendiamo un sito dove no dimensione del font la proprietà è impostata sul html elemento.

Se un utente ha il proprio browser con la dimensione predefinita di 16px, la dimensione del carattere di root sarà 16px. In Strumenti per sviluppatori di Chrome puoi vedere ciò che un elemento ha ereditato dal controllo Mostra proprietà ereditate sotto il calcolato linguetta.

In questo caso 10rem equivale a 160px, Ad esempio 10 x 16 = 160.

Se l'utente salta la dimensione del carattere del browser fino a 18px, la dimensione del carattere di root diventa 18px. Adesso 10rem si traduce in 180px, Ad esempio 10 x 18 = 180.

Effetto di impostazione del browser con em Dimensione carattere HTML unità

Quando un em la dimensione del carattere basato è impostata su html elemento, il valore in pixel che traduce sarà un multiplo dell'impostazione della dimensione del carattere del browser.

Ad esempio, se il sito è html elemento ha avuto un dimensione del font proprietà impostata su 1.25em, la dimensione del carattere di root sarebbe 1,25 volte l'impostazione della dimensione del carattere del browser.

Se la dimensione del carattere del browser è stata impostata su 16px, la dimensione del carattere radice verrebbe fuori come 20px, cioè 1,25 x 16 = 20.

In questo caso 10rem sarebbe uguale 200px, cioè 10 x 20 = 200.

Tuttavia, se la dimensione del carattere del browser è stata impostata su 20px, la dimensione del carattere di root verrebbe invece tradotta in 25px, cioè 1,25 x 20 = 25.

Adesso 10rem sarebbe uguale 250px, Ad esempio 10 x 25 = 250.

riassumendo em vs. rem Differenza

Ciò a cui tutto questo si riduce è:

• Traduzione di rem le unità al valore del pixel sono determinate dalla dimensione del carattere del html elemento. Questa dimensione del font è influenzata dall'eredità dall'impostazione della dimensione del carattere del browser, a meno che non venga sovrascritta esplicitamente con un'unità non soggetta all'ereditarietà.

• Traduzione di em le unità ai valori dei pixel sono determinate dalla dimensione del carattere dell'elemento su cui sono utilizzate. Questa dimensione del font è influenzata dall'ereditarietà degli elementi padre, a meno che non venga sovrascritta esplicitamente con un'unità non soggetta all'ereditarietà.

Perché usare rem unità:

Il più grande potere che rem l'offerta di unità non è solo quella di dare un dimensionamento coerente indipendentemente dall'ereditarietà dell'elemento. Piuttosto, è che ci danno un modo per avere le impostazioni delle dimensioni dei caratteri utente che influenzano ogni singolo aspetto del layout di un sito usando rem unità in cui eravamo abituati px unità.

Per questo motivo lo scopo principale dell'utilizzo rem le unità dovrebbero garantire che qualsiasi dimensione di carattere predefinita a cui un utente ha impostato il proprio browser, il layout si adatterà per adattarsi alle dimensioni del testo al suo interno.

Un sito può essere progettato inizialmente concentrandosi sulla dimensione del font del browser predefinito più comune di 16px.

Dimensione del carattere del browser 16px

Ma usando rem unità, se un utente aumenta la dimensione del carattere, l'integrità del layout verrà preservata e il testo non verrà schiacciato in uno spazio rigido destinato a un testo più piccolo.

Dimensione del carattere del browser 34 px

E se l'utente diminuisce la dimensione del carattere, l'intero layout si ridimensiona, e non sarà lasciato con una minuscola infarinatura di testo in una landa desolata di spazio bianco.

Dimensione del carattere del browser 9 px

Gli utenti modificano le impostazioni della dimensione del carattere per tutti i tipi di motivi, dalla vista sforzata alla scelta delle impostazioni ottimali per i dispositivi che possono essere molto diversi per dimensioni e distanza di visualizzazione. Accogliere queste impostazioni consente esperienze utente molto migliori.

Importante da sapere:

Alcuni designer usano rem layout basati in congiunzione con un fisso px unità dimensione del font impostazione sul html elemento. Questo è tipicamente fatto in modo che un cambiamento di dimensione del carattere sul html l'elemento può scalare il disegno in generale o in alto.

Vi sconsiglio vivamente di ignorare la dimensione del carattere html l'elemento eredita dalle impostazioni del browser dell'utente. Quindi questo impedisce alle impostazioni di avere alcun effetto e rimuove la capacità dell'utente di ottimizzare per la migliore visualizzazione.

Se si desidera modificare la dimensione del carattere sul html elemento, fallo con un em o rem valore poiché la dimensione del carattere radice sarà comunque un multiplo dell'impostazione della dimensione del carattere del browser dell'utente.

Ciò ti consentirà comunque di scalare il tuo progetto verso l'alto o verso il basso cambiando il tuo html dimensione del carattere dell'elemento, ma preserverai l'effetto delle impostazioni del browser dell'utente.

Perché usare em unità

Il valore chiave em offerta di unità è che consentono di determinare i valori di dimensionamento con una dimensione del carattere diversa da quella del html elemento.

Per questo motivo, lo scopo principale di em le unità dovrebbero essere per consentire la scalabilità nel contesto di un elemento di design specifico.

Ad esempio, potresti impostare il imbottitura, margine e altezza della linea attorno a una voce del menu di navigazione da utilizzare em valori.

Menu con dimensione font 0.9rem

In questo modo, se si modifica la dimensione del carattere del menu, la spaziatura intorno alle voci del menu verrà ridimensionata proporzionalmente, indipendentemente dal resto del layout.

Menu con dimensione font 1.2rem

Nella sezione precedente sull'ereditarietà hai visto quanto rapidamente tenere traccia di em le unità possono sfuggire di mano. Per questo motivo, lo consiglio solo utilizzando em unità se si identifica una chiara necessità per loro.

Applicazione pratica

Potrebbero esserci dei dibattiti tra i web designer e sono sicuro che persone diverse hanno approcci diversi, tuttavia la mia raccomandazione è la seguente.

Uso em Unità per:

Qualsiasi ridimensionamento che dovrebbe scala in base alla dimensione del carattere di un elemento diverso dalla radice.

In generale, l'unica ragione per cui devi usare em unità è in scala un elemento che ha il ridimensionamento del font non predefinito.

Come nell'esempio sopra riportato, i componenti di progettazione come voci di menu, pulsanti e intestazioni possono avere le proprie dimensioni di carattere esplicitamente dichiarate. Se si modificano queste dimensioni di carattere, si desidera che l'intero componente si riduca proporzionalmente.

Proprietà comuni a cui si applicherà questa linea guida margine, imbottitura, larghezza, altezza e altezza della linea impostazioni, se utilizzato su elementi con ridimensionamento del font non predefinito.

Lo raccomando quando lo fai em unità, è necessario impostare la dimensione del carattere dell'elemento su cui sono utilizzati rem unità per preservare la scalabilità ma evitare confusione di eredità.

In genere non usare em Unità per le dimensioni dei caratteri

È abbastanza comune da vedere em unità utilizzate per il dimensionamento dei caratteri, in particolare nelle intestazioni, tuttavia suggerirei che i disegni siano più gestibili se rem le unità vengono in genere utilizzate per il dimensionamento dei caratteri.

I titoli di ragione spesso usano em le unità sono una scelta migliore di px unità, essendo relativo alla dimensione del testo normale. però rem le unità possono raggiungere questo obiettivo altrettanto bene. Se qualsiasi modifica della dimensione del carattere sul html elemento è fatto, le dimensioni delle intestazioni saranno ancora scala anche.

Prova a cambiare il em dimensione del carattere sul html elemento in questo CodePen per vedere di persona:

Più spesso, non vogliamo che le nostre dimensioni dei caratteri scalino in base a qualsiasi elemento diverso dalla radice, con solo poche eccezioni.

Un esempio in cui potremmo volere em il dimensionamento dei caratteri basato potrebbe essere un menu a discesa, in cui è presente una voce di menu di secondo livello con dimensioni del testo dipendenti dalla dimensione del carattere del primo livello. Un altro esempio potrebbe essere un'icona di carattere utilizzata all'interno di un pulsante, in cui le dimensioni dell'icona dovrebbero essere correlate alle dimensioni del testo del pulsante.

Tuttavia, la maggior parte degli elementi di un web design tenderà a non avere questo tipo di requisito, quindi generalmente lo si vorrà usare rem unità per il dimensionamento dei caratteri, con em unità solo dove specificamente necessario.

Uso rem unità per:

Qualsiasi dimensionamento che non ha bisogno em unità per le ragioni sopra descritte e che dovrebbe scala in base alle impostazioni della dimensione del carattere del browser.

Questo rappresenta quasi tutto in un design standard che include la maggior parte delle altezze, la maggior parte delle larghezze, la maggior parte delle imbottiture, la maggior parte dei margini, le larghezze dei bordi, la maggior parte delle dimensioni dei caratteri, le ombre, praticamente quasi ogni parte del layout.

In poche parole, tutto ciò che può essere reso scalabile con rem unità, dovrebbe essere.

Mancia

Quando si creano i layout è spesso più facile pensare in pixel ma produrre in rem unità.

Puoi avere pixel in rem calcoli eseguiti automaticamente tramite un preprocessore come Stylus / Sass / Less o un postprocessore come PostCSS con il plugin PXtoRem.

In alternativa, puoi utilizzare PXtoEM per eseguire manualmente le tue conversioni.

Usa sempre rem Media Queries

Soprattutto, quando si utilizza rem le unità per creare un design uniformemente scalabile, dovrebbero essere presenti anche le tue richieste multimediali rem unità. Ciò garantirà che qualunque sia la dimensione del carattere del browser dell'utente, le tue query multimediali risponderanno ad esso e regoleranno il tuo layout.

Ad esempio, se un utente ridimensiona il testo molto in alto, potrebbe essere necessario che il layout scatti da due colonne a una singola colonna, proprio come potrebbe essere su un dispositivo mobile con schermo più piccolo.

Se i punti di interruzione sono a larghezza di pixel fissa, solo una dimensione di finestra diversa può attivarli. Tuttavia con rem in base ai punti di interruzione, risponderanno anche a differenti dimensioni dei caratteri.

Non usare em o rem Per:

Larghezze di layout a più colonne

In genere, le larghezze delle colonne in un layout dovrebbero essere % basato in modo che possano adattarsi fluidamente a viewport di dimensioni imprevedibili.

Tuttavia le singole colonne dovrebbero ancora generalmente incorporare rem valori tramite a larghezza massima ambientazione.

Per esempio:

css .container width: 100%; larghezza massima: 75rem;

Ciò mantiene la colonna flessibile e scalabile, ma impedisce che diventi troppo ampia affinché il testo in esso contenuto sia facilmente leggibile.

Quando un elemento dovrebbe essere rigorosamente invalicabile

In un tipico web design non ci saranno molte parti del tuo layout che non possono essere progettate per la scalabilità. Tuttavia, occasionalmente vi imbatterete in elementi che hanno realmente bisogno di usare valori fissi espliciti allo scopo di prevenire il ridimensionamento.

La precondizione per l'utilizzo di valori di dimensionamento fissi dovrebbe essere che se l'elemento in questione fosse ridimensionato, si romperebbe. Questo in realtà non viene fuori spesso, quindi prima che tu sia tentato di tirar fuori quelli px unità, chiediti se usarle è una necessità assoluta.

Avvolgendo

Diamo un rapido riepilogo dei punti elenco di ciò che abbiamo trattato:

• rem e em le unità sono calcolate in valori pixel dal browser, in base alle dimensioni dei caratteri nel progetto.
• em le unità sono basate sulla dimensione del carattere dell'elemento su cui sono usate.
• rem le unità sono basate sulla dimensione del carattere del html elemento.
• em le unità possono essere influenzate dall'ereditarietà della dimensione del carattere da qualsiasi elemento genitore

• rem le unità possono essere influenzate dall'eredità delle dimensioni dei caratteri dalle impostazioni dei caratteri del browser.

• Uso em unità per il ridimensionamento che devono essere ridimensionate in base alla dimensione del carattere di un elemento diverso dalla radice.
• Uso rem unità per il dimensionamento che non ha bisogno em unità, e questo dovrebbe ridursi in base alle impostazioni della dimensione del carattere del browser.
• Uso rem unità se non sei sicuro di aver bisogno em unità, incluse le dimensioni dei caratteri.
• Uso rem unità su media query
• Non usare em o rem in larghezze di layout a più colonne: utilizzare % anziché.
• Non usare em o rem se il ridimensionamento causerebbe inevitabilmente la rottura di un elemento di layout.

Spero che tu abbia ora realizzato un'immagine solida e completa di come esattamente em e rem le unità funzionano e, attraverso questo, sanno come sfruttarle al meglio nei tuoi progetti.

Vi incoraggio a provare le linee guida sull'utilizzo contenute in questo tutorial per voi stessi e ad apprezzare la scalabilità e la reattività completa dei layout che vi consentiranno di creare.