Home » Web Development » Css » La differenza tra em e rem nel css dei nostri siti

La differenza tra em e rem nel css dei nostri siti

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInBuffer this page

Vediamo la differenza tra em e rem in css

Se non siete proprio dei novellini con il CSS e soprattutto se avete già avuto modo di cimentarvi con il responsive design avrete sicuramente già incontrato le unità di misura em e rem. Spesso però capita che grafici e sviluppatori facciano fatica a distinguere queste due unità di misura tipiche dei moderni layout responsivi nel calcolo dei font-size, partiamo da qualche cenno storico e dalle definizioni.

In principio ci fu l’em

In CSS, un’unità em è uguale al font-size calcolato per l’elemento a cui è applicato l’em.

Ma cosa significa questo? Significa che un elemento a cui applicchiamo un valore em modificherà il suo normale font-size rapportandolo al valore di em che gli abbiamo passato. Facciamo un esempio pratico:

1
2
3
4
5
6
.container {
    font-size: 20px;
}
.container .example {
    font-size: 2em;
}

Ipotizzando di avere un contenitore che chiameremo .container, a cui associamo un valore di font-size di 20px, normalmente tutti gli elementi figli di questo contenitore erediterebbero questo font-size, per cui l’elemento .example avrebbe anche lui un font-size di 20px. Ma andando a definire un font-size in em a .example andiamo a dirgli di rapportare il font-size ereditato con il valore in em assegnato.

Per cui: 20 x 2 = 40

Quindi il .example del nostro esempio avrà un font-size di 4opx come risultato finale.

Come potete capire questo strumento ci aiuta enormemente, permettendoci di definire le misure che andremo ad usare nel nostro browser più “dinamicamente” ma rapportando comunque un ratio sul quale possiamo andare ad intervenire con facilità, senza stare a diventare pazzi nel calcolare i px precisi. Ma questa cosa però ha anche un lato negativo: se utilizziamo il valore em per diversi elementi annidati potremmo perdere rapidamente il controllo delle dimensioni. Ad esempio:

1
2
3
4
5
6
7
8
9
.container {
    font-size: 20px;
}
.container li {
    font-size: 2em;
}
.container p{
    font-size: 3em;
}

Nell’esempio qui sopra vediamo che abbiamo assegnato un valore di 2em sial agli elementi li figli di .container che ai p figli dello stesso contenitore. Ma se nel nostro HTML ci capitasse una struttura di questo tipo:

1
2
3
4
5
<ul class="container">
    <li>
       <p>Lorem Ipsum</p>
    </li>
</ul>

La scritta Lorem Ipsum verrebbe mostrata con un un font-size di 120px.

Questo perchè: ( 20px  x 2 ) x 3 = 120

La prima moltiplicazione arriva dal valore em assegnato all’elemento li, per cui se noi non avessimo annidato la scritta Lorem Ipsum all’interno del p (con valore di font-size a 3em) avremmo stampato la nostra scritta a 40px, come nell’esempio precedente, ma avendola annidata all’interno del p, la scritta guadagna anche un x3 facendola arrivare a 120px.

Va da se che in un esempio così semplice è facile riuscire a mantenere il controllo, ma in layout più complessi potrebbe non essere così semplice.

E poi arrivò il CSS3 con i rem

Con l’arrivo del CSS3 sono arrivati i rem, una nuova unità di misura che va a semplificarci tutto quanto:

Il rem si comporta come em, ma fa riferimento all’elemento alla radice del documento, la Root.

Questo significa che il valore del font-size non verrà mai calcolato sulla base della dimensione ereditata dal suo genitore, ma verrà calcolato sulla base delle dimensioni di base del documento. Quindi, non dovendoci più riferire alle dimensioni dei genitori, ma ad una unica dimensione iniziale, spariscono tutti le complicazioni che gli em si portavano dietro. Niente male vero?

rem vs em quale scegliere?

Nonostante Jeremy Church abbia scritto un articolo molto esaustivo dove spiega che lui preferisce spesso utilizzare gli em perchè gli permettono di lavorare facilmente su aree ristrette di una pagina senza intaccare tutto il resto; resto dell’idea che il rem sia uno strumento nettamente superiore. Soprattutto se si pensa realmente a sviluppi di layout per il responsive design!

Voi cosa ne pensate? Preferite i cari vecchi em o i rem?

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInBuffer this page
  • Marcello Surdi

    Articolo molto chiaro. Complimenti!

Resta sempre aggiornato

Stai tranquillo! Non invio E-mail di Spam e non faccio decine di invi ogni settimana. Ti invierò di tanto in tanto un messaggio per tenerti aggiornato sulle novità e sui nuovi articoli!
Email
Secure and Spam free...