Unità di Misura di lunghezza dei CSS

In questo articolo vedremo tutte le unità di misura di lunghezza dei CSS, dalle più popolari a quelle sconosciute. Scegliere la corretta unità di misura può toglierci molti pensieri, specialmente in fase di progettazione responsive.Le unità di misura di lunghezza dei CSS che analizzerò nell’articolo sono quelli relativi all’ultima Candidate Recommendation del W3C che potete trovare qua.

Prima però di addentrarci in tutti i valori e unità, conviene chiarire la distinzione tra unità di misura assolute e unità di misure relative, che tornerà utile nell’analisi di ogni singola unità di misura.

 

Unità di Misura Assolute

Per unità di misura assolute dei CSS si intendono unità di misura fissate rispetto a qualche misura fisica e che, quindi, rimangono costanti nel tempo.

Ad esempio sono unità di misura assolute i centimetri, definiti come la centesima parte del metro, e i pixel, definiti come la 96esima parte di un pollice.

Tutte le unità di misura assolute vengono ricondotte e possono essere convertite in pixel.

 

Unità di Misura Relative

Per unità di misura relative dei CSS si intendono, al contrario, unità di misura che dipendono da altre misure fissate e che possono variare in base al contesto in cui si trovano.

Sono unità di misura relative i “vw” (viewport’s width) che dipendono dalla larghezza del dispositivo, così come i vh che invece dipendono dall’altezza del dispositivo.

Iniziamo dalle unità di misura di lunghezza dei CSS più semplici e intuitive, cioè le unità di misura assolute.

 

Centimetri, Millimetri, Q e Inches

Le più conosciute nella nostra quotidianità, anche se sconsigliate e praticamente mai utilizzate in ambito di web development, sono centimetri (cm), millimetri (mm) e il quarto di millimetro (Q).

Il centimetro equivale a 96 pixel / 2.54, circa 37,8 pixel.

Il millimetro è, chiaramente un decimo, quindi 3,78 px, mentre il quarto di millimetro sono 0,95 px.

Non ci credete? Queste righe che vedete su CodePen hanno tutte esattamente la stessa lunghezza (5cm – 50mm – 196px) espressa in maniera diversa.

See the Pen Cm, Mm and Pixel by webassistente (@webassistente) on CodePen.0

Infine, gli inches (pollici), che rappresentano precisamente 96 px, 2.54 cm.

Pica e Punti

Entrambi sono prevalentemente utilizzati per la misura del font da parte dei grafici e tipografici.

La pica (pc) rappresenta 12 punti che equivale a 1/6 di pollice, lo potete trovare se lavorate ad esempio con Adobe InDesign.

Il punto (pt) equivale a 1/72 di pollice, quindi a 1,3 pixel. Utilizzato spesso dai grafici in programmi come Adobe Illustrator.

Anche in questo caso, il mio consiglio è di rimanere fedeli ai pixel in fase di progettazione e, quindi, di riconvertire tutto o di progettare direttamente in px (o em come vedremo sotto).

Sotto un esempio delle grandezze sopra citate per la dimensione del font.

See the Pen MXLaby by webassistente (@webassistente) on CodePen.0

Pixel

Infine, i pixel! L’unità di misura principe e di riferimento per tutte le altre misure assolute (almeno nel mondo dell’informatica).

Come abbiamo visto sopra, infatti, tutte le misure del mondo fisico possono essere riconvertite in un certo numero di pixel nel mondo digitale.

I pixel vengono utilizzati sia per stabilire le misure dei div o delle immagini, sia per la grandezza dei font che per i margini o il padding e per molto altro ancora!

Indubbiamente è l’unità di misura di lunghezza dei CSS che utilizzerete di più nella vostra carriera di web developer.

A questo punto, finita la rassegna delle unità di misura assolute, possiamo passare alle unità di misure relative.

 

Em, ex, ch e rem

A seguito della diffusione del responsive web design, gli “em” sono diventati le unità di misura di lunghezza dei CSS più utilizzate nella definizione della grandezza del font.

La grandezza per gli “em” è ricavata moltiplicando il coefficiente degli “em” per il font-size che sarebbe applicato dalle regole CSS che avete scritto.

Un esempio per chiarire meglio: mettiamo che abbiate impostato come unica font-size, quella del documento pari a 14px, allora 1em sarà esattamente 14px, 2em varrebbero invece il doppio, cioè 28px.

Per maggiore chiarezza guardate l’esempio di seguito:

See the Pen GGzoRR by webassistente (@webassistente) on CodePen.0

Se non viene definito il font-size nel vostro documento CSS, 1 em equivale a 16px, ma solo in questo caso.

Una piccola particolarità, se utilizzate gli “em” ed è stato già fissato il font-size precedentemente in “em”, la misura finale si otterrà moltiplicando gli “em”.

Chiarisco con un esempio, il documento è stato specificato con font-size:16px, un div risulta avere font-size: 2em e al suo interno c’è un altro div con font-size:3em, allora la misura finale del font-size di quest’ultimo div sarà 16 * 2 * 3 = 96px

Come potete vedere in quest’esempio sotto:

See the Pen Em Moltiplicato by webassistente (@webassistente) on CodePen.0

Per questo motivo è definita come unità di misura relativa, perché dipende sempre dal contesto in cui si trova.
Ex” è un’unità di misura di lunghezza dei CSS utilizzata più raramente ed equivale all’altezza del carattere “x” nel font definito dal documento. E’ sempre un’unità di misura relativa, infatti al cambiare del font cambia l’altezza del carattere “x” e di conseguenza il valore “ex”.
Se “ex” prende in riferimento l’altezza del carattere x, i “ch” utilizzano come riferimento la larghezza dello zero. Quindi un box con width:1ch contiene in larghezza un solo 0.
Anche questa unità è poco utilizzata, può però avere un suo impiego, appunto, nel definire la larghezza di un div, così da sapere quanti caratteri saranno contenuti in ogni riga.
Sotto un esempio:

See the Pen Ch Example by webassistente (@webassistente) on CodePen.0

Infine, chiudiamo questo paragrafo con i “rem”, che si comporta come gli “em” con la grossa differenza di fare sempre riferimento all’elemento radice del documento.
Quindi, i valori in rem vengono calcolati sempre in base al font-size definito nell’elemento radice del documento (solitamente il tag html), e non vengono ricalcolati in base all’elemento contenitore, questo li rende molto più leggibili e chiari.

Vw, vh, vmin e vmax

Queste unità di misura sono relative più che altro alla larghezza e altezza del dispositivo, ma possono essere usate anche per specificare la grandezza del font.

Vw indica viewport width, quindi la larghezza del dispositivo in uso. 1vw equivale all’1% della larghezza del dispositivo.

Vh, invece sta per viewport height, e quindi prende come riferimento l’altezza del dispositivo. Il funzionamento è lo stesso dei vw.

Vmin e Vmax invece sono relativi rispettivamente alla dimensione minore e maggiore del dispositivo in uso. Quindi, se usate un computer dove la larghezza del monitor è maggiore dell’altezza, allora il vmin sarà relativo all’altezza e il vmax sarà relativo alla larghezza.

Queste sono le unità di misura di lunghezza dei CSS, che è giusto saper usare per costruire siti responsive e stare al passo. Apro una piccola parentesi per quanto riguarda il valore percentuale, che appunto non è un’unità di misura ma un valore utilizzato moltissimo nel responsive web design.

Il valore %

Molto intuitivamente, rappresenta una percentuale (in altezza o larghezza) del box che lo contiene. Supponendo di avere un div con width:80%, specificando un div all’interno con width:50% otterremo una larghezza finale del 40% (cioè la metà dell’80%).

 

Se avete delle domande, volete chiarimenti o aggiungere qualsiasi cosa commentate in fondo al post oppure scrivetemi un email tramite il form contatti

Potrebbero Interessarti anche Questi Articoli

Qualche Info sull'Autore: Web Assistente

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *