css-units-unità-di-misura-thumbnail

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’DESCRIZIONECORRISPETTIVO
pxpixel1 px = 0.026 cm = 1/96 in
ptpoint1 pt = 0.035 cm = 1/72 in
pcpica1 pc = 12 pt
cmcentimetro1 cm = 37.8 px
mmmillimetro
Qquarto di millimetro
ininch1 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
remroot em – relative alle misure del root element html
emrelative alle misure dell’elemento parent
%percentuale – relative alle misure dell’elemento parent
vwviewport width – 1 vw = 1% dell’ampiezza del viewport
vh viewport heigth – 1 vh = 1% dell’altezza del viewport
vminviewport min – 1 vmin = 1% della dimensione più piccola del viewport
vmax viewport max – 1 vmax = 1% della dimensione più grande del viewport
chcharacters – numero di caratteri, relativi all’ampiezza del font dell’elemento
lhline 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.

Guarda il video:

Articoli simili