Molte proprietà CSS utilizzano valori di “grandezza”: width, margin, font-size, ecc.
Una “grandezza” è un numero seguito (senza frapporre spazi) da un’unità di misura.
Esistono due tipi di unità di misura: relative e assolute.
Le unità di misura relative fanno riferimento ad un’altra entità (es. 3% dell’ampiezza della finestra), mentre le unità di misura assolute esprimono esattamente il valore della dimensione (es. 3 centimetri).
Unità di misura Relative
| Correlazione | Unità di misura | Descrizione |
|---|---|---|
| font | em | Misura relativa alla larghezza della M maiuscola del font applicato all’elemento |
| font | ex | Misura relativa all’altezza della lettera x del font applicato all’elemento (usato raramente) |
| font | ch | Misura relativa all’ampiezza (width) dello “0” (zero) del font applicato all’elemento |
| font | rem | (root em) Misura relativa al valore di em dell’elemento html (root element). |
| viewport | vw | Misura relativa all’ 1% dell’ampiezza (width) della viewport |
| vieport | vh | Misura relativa all’ 1% dell’altezza (height) della viewport |
| vieport | vmin | Misura relativa all’ 1% della dimensione minore della viewport (es. la larghezza per un cellulare in verticale, altezza per un cellulare in orizzontale) |
| vieport | vmax | Misura relativa all’ 1% della dimensione maggiore della viewport |
| elemento padre | % | Misura relativa alla corrispondente proprietà dell’elemento padre. |
Unità di misura Assolute
| Unità di misura | Nome | Descrizione |
|---|---|---|
| px | pixels | 1 pollice = 96 px |
| cm | centimeters | 1 pollice = 2,54 cm |
| mm | millimeters | 1 pollice = 25,4 mm |
| in | inches | |
| pt | points | 1 pollice = 72 pt |
| pc | picas | 1 pollice = 6 pc (1 pica corrisponde a 12 punti) |
Utilizzo dell’unità di misura em
Progettando una pagina web che dev’essere visualizzata su diversi dispositivi, si può decidere di usare un font di dimensione più grande, se la pagina viene visualizzata su uno schermo ampio (in inglese: "widescreen") e man mano più piccolo quando la pagina viene visualizzata su un portatile, uno smartphone, ecc.
Per variare in modo proporzionale anche l’ampiezza di alcune proprietà CSS (es. margin, padding…) si può utilizzare l’unità di misura “em”. In questo modo, allo scalare del font, anche le ampiezze diminuiscono proporzionalmente.
Utilizzo dell’unità di misura rem
Font-size indipendente dall’elemento padre
Contrariamente a quanto avviene per l’unità di misura em, l’uso dell’unità di misura rem rende indipendenti dal font-size corrente (che è influenzato dal font-size dell’elemento padre).
Nella semplice pagina HTML che segue, l’uso di em fa sì che elemento figlio risulti “più grande” dell’elemento padre:
<!DOCTYPE html>
<html>
<head>
<style>
ul {font-size: 1.2em;}
</style>
</head>
<body>
<ul>
<li>elemento padre</li>
<ul>
<li>elemento figlio</li>
</ul>
</ul>
</body>
</html> Se invece si utilizza l’unità di misura rem, le due righe avranno la stessa dimensione di font.
- Quando le unità em vengono utilizzate sulla proprietà font-size, la dimensione è relativa al font-size dell’elemento padre. Se vengono utilizzate su altre proprietà, la dimensione è relativa al font-size dell’elemento stesso.
Semplificazione dei calcoli
Per i browser, il valore di default di 1em corrisponde a 16px.
Quando un progettista abituato a ragionare in pixel deve esprimere una grandezza in em, deve dividere per 16 il valore desiderato. Ad esempio, volendo assegnare ad un titolo un font-size di 25px dovrà esprimere questo valore come 1.5625em.
Il calcolo non è immediato e dovrà ricorrere ad una calcolatrice o a servizi online come pxtoem.com.
Per ovviare a questo inconveniente, si può ricorrere ad uno stratagemma:
html {font-size: 0.625em;}
body {font-size: 1.6em;}In pratica:
- si moltiplica per 0.625 (equivale a dividere per 1.6) il font-size del root element. In questo modo, per l’intero documento HTML 1em = 1rem = 10px;
- si moltiplica per 1.6 il font-size dell’elemento body.
In questo modo, 1rem rimane equivalente a 10px, mentre per per l’intero documento HTML (escluso l’elemento head, che comunque non è visualizzato) 1em torna ad essere equivalente a 16px.
Per esprimere una grandezza di 25px si potrà adesso indicare il valore di 2.5rem.
- se avessimo valorizzato il font size dell’elemento html utilizzando un’unità di misura assoluta (ad esempio:
html {font-size: 10px;}invece di:html {font-size: 0.625em;}, il documento html risulterebbe insensibile alle eventuali modifiche fatte dall’utente sulle dimensioni del carattere del browser (su chrome l’utente può modificare la dimensione del carattere tramite la pagina di impostazioni: chrome://settings/appearance ).
Risorse in rete
Vedere il documento CSS Values and Units Module Level 3 di W3C.
0 commenti