 |
In questo articolo vogliamo fornire una documentazione completa e aggiornata sulle unità di misura in CSS. L’obiettivo è offrire un riferimento che sia utile sia a chi si avvicina per la prima volta a questo argomento, sia a chi vuole rinfrescare la memoria e avere un riferimento rapido a portata di mano. Troverai spiegazioni chiare, tabelle riassuntive ed esempi pratici per comprendere le differenze tra ogni tipo di unità.
Di seguito la struttura dell’articolo:
- Classificazione delle unità di misura
- Unità di Tempo e Angoli
- Suggerimenti pratici
- Riferimenti utili
1. Introduzione
Le unità di misura in CSS definiscono dimensioni, spazi e proporzioni di elementi e testo. Scegliere l’unità giusta è importante per ottenere un design responsivo, accessibile e coerente.
2. Classificazione delle unità di misura
2.1. Unità Assolute
Misure fisse, indipendenti dal contesto o dalla dimensione dello schermo.
| Unità | Significato | Esempio |
|---|---|---|
px |
Pixel | font-size: 16px; |
cm |
Centimetri | width: 2cm; |
mm |
Millimetri | margin: 5mm; |
in |
Pollici | height: 2in; |
pt |
Punti tipografici (1/72 pollice) | font-size: 12pt; |
pc |
Pica tipografica (1pc = 12pt) | width: 2pc; |
💡 Nota: sul web px è l’unità assoluta più comune; le altre sono poco usate per via delle differenze tra schermi.
2.2. Unità Relative alla dimensione del font
Dipendono dal font-size dell’elemento o del suo contenitore.
| Unità | Significato | Esempio |
|---|---|---|
em |
Relativa al font-size dell’elemento |
padding: 2em; |
rem |
Relativa al font-size dell’elemento radice (html) |
font-size: 1.2rem; |
ex |
Altezza della lettera “x” | line-height: 2ex; |
ch |
Larghezza del carattere "0" | width: 40ch; |
💡 Nota pratica: usare rem per consistenza globale, em per spazi proporzionati localmente.
2.3. Unità Relative al viewport
Dipendono dalle dimensioni della finestra del browser.
| Unità | Significato | Esempio |
|---|---|---|
vw |
1% della larghezza del viewport | width: 50vw; |
vh |
1% dell’altezza del viewport | height: 100vh; |
vmin |
Percentuale del lato minore | font-size: 2vmin; |
vmax |
Percentuale del lato maggiore | font-size: 2vmax; |
svw / svh |
Small Viewport | - |
lvw / lvh |
Large Viewport | - |
dvw / dvh |
Dynamic Viewport | - |
2.4. Unità Percentuali
Relativa a una proprietà e al contenitore. Esempio: width: 50%; = metà della larghezza del contenitore.
⚠️ Attenzione: height: 100% funziona solo se il contenitore ha un’altezza definita.
3. Unità di tempo e angoli
Usate per animazioni e trasformazioni.
| Tipo | Unità | Esempio |
|---|---|---|
| Tempo | s (secondi), ms (millisecondi) |
transition: 0.3s; |
| Angoli | deg, rad, grad, turn |
transform: rotate(45deg); |
4. Suggerimenti pratici
- Preferire unità relative (
rem,%,vw,vh) per design responsive. - Usare
pxsolo quando serve fissare dimensioni precise. - Combinare unità diverse per effetti flessibili (
calc()). - Testare su schermi diversi per evitare problemi di leggibilità.
5. Riferimenti utili
Follow me #techelopment
Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment
