Potresti aver fatto i conti con l’uso di unità di misura flessibili, ma potresti ancora non comprendere appieno quando usare rem e quando usare em. Questo tutorial ti aiuterà a capirlo!

Sia em che rem sono unità flessibili e scalabili che vengono tradotte dal browser in valori di pixel, a seconda delle impostazioni di dimensione del carattere nel tuo progetto. Se si utilizza un valore di1em o1rem, potrebbe tradursi nel browser come qualsiasi cosa da16px a160px o qualsiasi altro valore.

On the other hand px values are used by the browser così com’è, quindi 1px verrà sempre visualizzato esattamente come 1px.

Prova il dispositivo di scorrimento su questo CodePen esempio per vedere come il valore di rem e em unità in grado di tradurre in diversi valori di pixel, mentre impostare in modo esplicito px unità soggiorno una dimensione fissa:

La Grande Domanda

Con em e rem unità ci dà la flessibilità nei nostri progetti, e la possibilità di scalare gli elementi su e giù, invece di essere bloccato 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 complessiva dei siti per la massima leggibilità.

Entrambe le unitàemerem forniscono questa flessibilità e funzionano in modi simili, quindi la grande domanda è: quando dovremmo usareem valori e quando dovremmo usarerem valori?

Differenza cruciale

La differenza traem erem unità è come il browser determina ilpx valore traducono in. Comprendere questa differenza è la chiave per determinare quando utilizzare ogni unità.

Inizieremo esaminando come le unitàrem eem funzionano da zero per essere sicuri di conoscere ogni dettaglio. Quindi passeremo al motivo per cui dovresti usareem orem unità.

Infine vedremo l’applicazione pratica di esattamente quali elementi di un disegno tipico si dovrebbe usare ogni tipo di unità su.

Come le unità rem si traducono in valori di pixel

Quando si utilizzano le unitàrem, la dimensione dei pixel in cui vengono tradotte dipende dalla dimensione del carattere dell’elemento radice della pagina, ovvero l’elementohtml. Quella dimensione del carattere principale viene moltiplicata per qualsiasi numero tu stia usando con la tua unitàrem.

Ad esempio, con una dimensione del carattere dell’elemento radice di16px10remequivale a160px, cioè 10 x 16 = 160.

Come em Unità di Tradurre i Valori in Pixel

Quando si utilizza em unità di misura, il valore del pixel si finisce con è una moltiplicazione di dimensione del font dell’elemento a essere in stile.

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

È un malinteso un po ‘ diffuso cheem le unità siano relative alla dimensione del carattere dell’elemento genitore. Infatti, secondo le specifiche W3, sono relativi alla dimensione del carattere”dell’elemento su cui vengono utilizzati”.

Le dimensioni dei caratteri dell’elemento genitore possono influire sui valoriem, ma quando ciò accade è esclusivamente a causa dell’ereditarietà. Diamo un’occhiata al perché e vediamo come funziona in azione.

L’effetto dell’ereditarietà sulle unità em

Lavorare conem le unità possono iniziare a diventare complicate quando si tratta di ereditarietà, perché 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’ereditarietà, ad esempiopx ovw.

La dimensione del carattere dell’elemento su cui vengono utilizzate le unitàem determina la loro dimensione. Ma quell’elemento potrebbe 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 che qualsiasi valore em sia influenzato dalla dimensione del carattere di uno qualsiasi dei suoi genitori.

Diamo un’occhiata ad un esempio. Sentitevi liberi di provare questo in CodePen per voi stessi come facciamo un passo attraverso di essa. Mentre vai avanti, usa Chrome Developer Tools o Firebug per Firefox per ispezionare i valori dei pixel in cui vengono calcolate le nostre unità em.

Esempio di em Eredità

Se si dispone di una pagina con una radice dimensione del carattere 16px (di solito il default) e un bambino div al suo interno con imbottitura di 1.5em, che div erediteranno la dimensione del carattere 16px dall’elemento radice. Quindi il suo padding si tradurrà in 24px, cioè 1,5 x 16 = 24.

Allora cosa succede se avvolgiamo un altro div attorno al primo e impostiamo il suo font-sizesu 1.25em?

Il nostro wrapper div eredita la dimensione del carattere root di16pxe la moltiplica per la propriafont-sizeimpostazione di1.25em. Questo imposta il div per avere una dimensione del carattere di 20px, cioè 1,25 x 16 = 20.

Ora il nostro div originale non eredita più direttamente dall’elemento radice, ma eredita una dimensione del carattere di20px dal suo nuovo div genitore. Il suo valore di riempimento di1.5em ora equivale a30px, cioè 1,5 x 20 = 30.

Questo effetto di ridimensionamento può essere ulteriormente aggravato se aggiungiamo una dimensione del carattere basata su em al nostro div originale, diciamo 1.2em.

Il div eredita la dimensione del carattere20px dal suo genitore, quindi la moltiplica per la propria impostazione1.2em, dandogli una nuova dimensione del carattere di24px, cioè 1,2 x 20 = 24.

Il1.5em padding sul nostro div ora cambierà di nuovo dimensione con la nuova dimensione del carattere, questa volta a36px, cioè 1,5 x 24 = 36.

Infine, per illustrare ulteriormente che em unità sono relative alla dimensione del font dell’elemento sono abituati, (e non l’elemento padre), vediamo cosa succede al nostro imbottitura di 1.5em se abbiamo impostato in modo esplicito il div di utilizzare una dimensione di carattere di 14px, un valore non soggetto all’eredità.

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

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

L’effetto delle impostazioni del browser sull’elemento HTML Dimensione del carattere

Per impostazione predefinita i browser di solito hanno una dimensione del carattere di 16px, ma questo può essere modificato da 9px a 72px dall’utente.

Importante da sapere:

L’elemento roothtml eredita la sua dimensione del carattere dalle impostazioni del browser, a meno che non venga sovrascritto con un valore fisso impostato esplicitamente.

Quindi, mentre la dimensione del carattere sull’elementohtml è ciò che determina direttamente i valorirem, quella dimensione del carattere potrebbe provenire prima dalle impostazioni del browser.

Quindi le impostazioni della dimensione del carattere del browser possono influenzare il valore di ogni unitàrem utilizzata in un progetto, così come ogni unitàem tramite ereditarietà.

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

A meno che non venga sovrascritto, l’elementohtml erediterà qualsiasi sia l’impostazione predefinita della dimensione del carattere nel browser. Ad esempio, prendiamo un sito in cui nessuna proprietà font-size è impostata sull’elemento html.

Se un utente ha il proprio browser alla dimensione predefinita del carattere di 16px, la dimensione del carattere principale sarà 16px. In Chrome Developer Tools puoi vedere ciò che un elemento ha ereditato controllando Mostra proprietà ereditate nella scheda Calcolata.

In questo caso 10rem equivale a 160px, cioè 10 x 16 = 160.

Se l’utente modifica la dimensione del carattere del browser fino a 18px, la dimensione del carattere principale diventa 18px. Ora 10remsi traduce in180px, cioè 10 x 18 = 180.

impostazioni del Browser Effetto con Unità em HTML Dimensione del Carattere

Quando un em basato dimensione del carattere è impostato su html elemento, il valore in pixel che si traduce in volontà di essere un multiplo del browser, tipo di carattere e dimensione.

Ad esempio, se l’elemento html del sito aveva una proprietà font-size impostata su 1.25em, la dimensione del carattere principale sarebbe 1,25 volte l’impostazione della dimensione del carattere del browser.

Se la dimensione del carattere del browser è stata impostata su16px, la dimensione del carattere principale verrebbe fuori come20px, cioè 1,25 x 16 = 20.

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

Tuttavia, se il browser dimensione del carattere è impostato su 20px root, dimensione del carattere, invece di tradurre 25px, cioè 1,25 x 20 = 25.

10rem sarebbe uguale 250px, cioè 10 x 25 = 250.

Riassumendo em vs rem Differenza

che Cosa tutto quanto sopra si riduce a questo:

• Traduzione rem unità di misura per il valore del pixel è determinato dalla dimensione del carattere del html elemento. Questa dimensione del carattere è influenzata dall’ereditarietà dall’impostazione Dimensione carattere del browser a meno che non venga sovrascritta esplicitamente con un’unità non soggetta all’ereditarietà.

• La traduzione di em unità a valori di pixel è determinata dalla dimensione del carattere dell’elemento su cui vengono utilizzati. Questa dimensione del carattere è influenzata dall’ereditarietà degli elementi padre a meno che non venga sovrascritta esplicitamente con un’unità non soggetta all’ereditarietà.

Perché usare le unità rem:

La potenza maggiore offerta dalle unitàrem non è solo quella di dare un dimensionamento coerente indipendentemente dall’ereditarietà degli elementi. Piuttosto, è che ci danno un modo per far sì che le impostazioni della dimensione del carattere dell’utente influenzino ogni singolo aspetto del layout di un sito utilizzando rem unità in cui usavamo px unità.

Per questo motivo lo scopo principale dell’utilizzo delle unità rem dovrebbe essere quello di 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 carattere del browser predefinito più comune di 16px.

Ma usando rem unità di misura, se un utente aumenta la dimensione del font, l’integrità del layout verrà conservato, e il testo non ottenere schiacciato in una rigida spazio significava per i più piccoli di testo.

E se l’utente diminuisce la loro dimensione del carattere, l’intero layout scale giù, e non essere di sinistra, con una piccola infarinatura di testo in un deserto di spazio bianco.

Gli utenti cambiano le impostazioni della dimensione del carattere per tutti i tipi di motivi, dalla vista tesa alla scelta di impostazioni ottimali per dispositivi che possono essere molto diverse per dimensioni e distanza di visualizzazione. Ospitare queste impostazioni consente esperienze utente molto migliori.

Importante da sapere:

Alcuni progettisti utilizzanorem layout basati in combinazione con un’impostazione fissapx unitàfont-size sull’elementohtml. Questo viene in genere fatto in modo che una modifica della dimensione del carattere sull’elemento html possa scalare il disegno in alto o in basso.

Sconsiglio vivamente questo in quanto sovrascrive la dimensione del carattere che l’elementohtml 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 una migliore visualizzazione.

Se si desidera modificare la dimensione del carattere sull’elemento html, farlo con un valore em o rem poiché la dimensione del carattere principale sarà comunque un multiplo dell’impostazione della dimensione del carattere del browser dell’utente.

Questo ti permetterà comunque di scalare il tuo progetto in alto o in basso modificando la dimensione del carattere dell’elementohtml, ma preserverai l’effetto delle impostazioni del browser dell’utente.

Perché usare le unità em

Il valore chiaveem le unità offrono è che consentono di determinare i valori di dimensionamento da una dimensione del carattere diversa da quella dell’elementohtml.

Per questo motivo, lo scopo principale delle unità em dovrebbe essere quello di consentire la scalabilità nel contesto di uno specifico elemento di progettazione.

Ad esempio, è possibile impostare paddingmargin e line-height attorno a una voce di menu di navigazione per utilizzare i valori em.

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

la sezione eredità avete visto quanto velocemente tenere traccia di em unità può sfuggire di mano. Per questo motivo, consiglio di utilizzare solo le unitàem se si identifica una chiara necessità per loro.

Applicazione pratica

Ci può essere qualche dibattito tra i web designer e sono sicuro che diverse persone hanno diversi approcci preferiti, tuttavia la mia raccomandazione è la seguente.

Usa le unità em per:

Qualsiasi dimensionamento che dovrebbe essere scalabile in base alla dimensione del carattere di un elemento diverso dalla radice.

In generale, l’unica ragione per cui dovrai usare le unità em è ridimensionare un elemento che ha un dimensionamento dei caratteri non predefinito.

Come nel nostro esempio sopra, i componenti di progettazione come le voci di menu, i pulsanti e le intestazioni possono avere le loro dimensioni dei caratteri esplicitamente indicate. Se si modificano queste dimensioni dei caratteri, si desidera che l’intero componente venga scalato proporzionalmente.

Comune proprietà di questa linea guida si applica a sono: marginpaddingwidthheight e line-height impostazioni, quando utilizzato su elementi che non tipo di carattere predefinito di dimensionamento.

Quando si impiegano unitàem, la dimensione del carattere dell’elemento su cui vengono utilizzate deve essere impostata in unitàrem per preservare la scalabilità ma evitare confusione di ereditarietà.

In genere non si usanoem Unità per le dimensioni dei caratteri

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

Il motivo per cui le intestazioni usano spesso le unitàemè che sono una scelta migliore rispetto alle unitàpx, essendo relative alle normali dimensioni del testo. Tuttaviarem le unità possono raggiungere questo obiettivo altrettanto bene. Se viene eseguita una regolazione della dimensione del carattere sull’elementohtml, anche le dimensioni dell’intestazione verranno comunque ridimensionate.

Prova a cambiare la dimensione del carattereem sull’elementohtml in questo CodePen per vedere di persona:

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

Un esempio in cui potremmo volereem il dimensionamento dei font basato potrebbe essere un menu a discesa, in cui abbiamo una voce di menu di secondo livello dimensioni del testo in base alla dimensione del carattere del primo livello. Un altro esempio potrebbe essere un’icona di carattere utilizzata all’interno di un pulsante, in cui la dimensione dell’icona dovrebbe riguardare la dimensione del testo del pulsante.

Tuttavia la maggior parte degli elementi in un web design tenderà a non avere questo tipo di requisito, quindi in genere vorrai usarerem unità per il dimensionamento dei font, conem unità solo dove specificamente necessario.

Usa le unità rem per:

Qualsiasi dimensionamento che non necessita diem unità per i motivi sopra descritti, e che dovrebbe essere scalabile in base alle impostazioni della dimensione del carattere del browser.

Questo rappresenta quasi tutto in un design standard tra cui la maggior parte delle altezze, la maggior parte delle larghezze, la maggior parte del padding, 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.

Suggerimento

Quando si creano layout è spesso più facile pensare in pixel ma l’output inrem unità.

Si può avere pixel arem 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 conversioni.

Utilizzare semprerem Media Query

Importante, quando si utilizzano remunità per creare un design uniformemente scalabile, le query multimediali devono essere anche in rem unità. Ciò garantirà che qualunque sia la dimensione del carattere del browser di un utente, le query multimediali risponderanno e regoleranno il layout.

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

Se i tuoi punti di interruzione sono a larghezze di pixel fisse, solo una dimensione della finestra diversa può attivarli. Tuttavia conrem breakpoint basati risponderanno anche a diverse dimensioni dei font.

Non usare em o rem per:

Larghezze di layout a più colonne

Le larghezze di colonna in un layout dovrebbero in genere essere basate su% in modo che possano adattarsi fluidamente a finestre di dimensioni imprevedibili.

Tuttavia le singole colonne dovrebbero comunque generalmente incorporarerem valori tramite un’impostazionemax-width.

Ad esempio:

.container { width: 100%; max-width: 75rem;}

Questo mantiene la colonna flessibile e scalabile, ma impedisce che diventi troppo ampia per il testo in essa contenuto per essere comodamente leggibile.

Quando un elemento deve essere rigorosamente non scalabile

In un tipico design web non ci saranno molte parti del layout che non possono essere progettate per la scalabilità. Tuttavia occasionalmente ci si imbatte in elementi che hanno davvero bisogno di utilizzare valori fissi espliciti allo scopo di prevenire il ridimensionamento.

La precondizione per l’impiego 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 di essere tentati di tirar fuori quelle unità px, chiediti se usarle è una necessità assoluta.

Conclusione

Facciamo un rapido riepilogo di ciò che abbiamo trattato:

• rem eem le unità vengono calcolate in valori di pixel dal browser, in base alle dimensioni dei caratteri nel tuo progetto.
• em le unità sono basate sulla dimensione del carattere dell’elemento su cui vengono utilizzate.
• rem le unità sono basate sulla dimensione del carattere dell’elementohtml.
• em le unità possono essere influenzate dall’ereditarietà delle dimensioni dei caratteri da qualsiasi elemento genitore

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

• Usa em unità per il dimensionamento che devono essere ridimensionate in base alla dimensione del carattere di un elemento diverso dalla radice.
• Usarem unità per il dimensionamento che non ha bisogno diem unità, e che dovrebbero essere ridimensionate in base alle impostazioni della dimensione del carattere del browser.
• Usarem unità a meno che tu non sia sicuro di aver bisogno di em unità, incluse le dimensioni dei caratteri.
• Utilizzarerem unità su media query
• Non utilizzareem orem in larghezze di layout multi colonna – utilizzare invece%.
• Non usare emo rem se il ridimensionamento causerebbe inevitabilmente la rottura di un elemento di layout.

Spero che tu abbia ora costruito un quadro robusto e completo di esattamente come funzionano le unitàem erem e attraverso questo sai come sfruttarle al meglio nei tuoi progetti.

Vi incoraggio a provare le linee guida di utilizzo contenute in questo tutorial per te, e godere la scalabilità a tutti gli effetti e la reattività dei layout che ti permettono di creare.