Le unità di misura in CSS sono il mezzo che ci da la possibilità di determinare la grandezza di un elemento. Ci sono due categorie di unità di misura, Absolute Units e Relative Units. Le absolute units, come si può comprendere dal nome sono assolute, hanno sempre la stessa misura e non sono relative a nulla. Le unità di misura relative sono relative ad altre misure, ad esempio possono essere relative all’elemento parent, oppure relative alla grandezza del viewport; in pratica fanno riferimento a qualcos’altro.
Absolute Units – Le unità assolute
| UNITA’ | DESCRIZIONE | CORRISPETTIVO |
| px | pixel | 1 px = 0.026 cm = 1/96 in |
| pt | point | 1 pt = 0.035 cm = 1/72 in |
| pc | pica | 1 pc = 12 pt |
| cm | centimetro | 1 cm = 37.8 px |
| mm | millimetro | |
| Q | quarto di millimetro | |
| in | inch | 1 in = 2.54 cm |
I pixel sono le unità di misura usate nello sviluppo web, raramente si usano anche point e pica. Cm, mm e inches sono più usate nella stampa.
Relative Units – Le unità relative
| UNITA’ | DESCRIZIONE |
| rem | root em – relative alle misure del root element html |
| em | relative alle misure dell’elemento parent |
| % | percentuale – relative alle misure dell’elemento parent |
| vw | viewport width – 1 vw = 1% dell’ampiezza del viewport |
| vh | viewport heigth – 1 vh = 1% dell’altezza del viewport |
| vmin | viewport min – 1 vmin = 1% della dimensione più piccola del viewport |
| vmax | viewport max – 1 vmax = 1% della dimensione più grande del viewport |
| ch | characters – numero di caratteri, relativi all’ampiezza del font dell’elemento |
| lh | line height – relative all’altezza della linea dell’elemento |
| ex | x-height – relative all’altezza del carattere |
Le unità di misura relative sono quelle più usate al giorno d’oggi per costruire siti web moderni, i quali devono andare bene per telefonini, tablet, laptop, desktop e anche televisioni; tutti questi aggeggi hanno schermi di dimensioni e risoluzione ben diverse, avere un layout flessibile è un requisito necessario e usare le unità relative ci facilita questo compito.
Le unità relative in CSS sono pratiche perché scalano in base al parent element, l’elemento in cui sono racchiuse, o in base alla grandezza della finestra del browser, viewport. Grazie a questo non è più necessario aggiornare lo stile per ogni dispositivo.
Guarda questo video con qualche esempio pratico sulle unità di misura più spesso usate per capire meglio questi concetti.
