Unità CSS: quale usare quando

Relativo a cosa? Questa è la domanda che decide quale unità CSS usare. Ogni unità risponde in modo diverso al font, allo schermo, al contenitore e scegliere quella sbagliata è la causa più comune di layout che «funzionano sul mio computer» e si rompono altrove.

1. px, em, rem: il trio di base (richiamo)

px è una unità di misura assoluta, possono creare problemi di accessibilità, perché non seguono le preferenze dell'utente. em e rem sono relative al font (dell'elemento/genitore la prima, della radice <html> la seconda), le abbiamo viste in dettaglio nella pillola sulla tipografia.

Fonte: MDN Web Docs: «<length>»: le unità assolute possono causare problemi di accessibilità.

2. vw, vh, vmin, vmax: relative allo schermo

Queste unità sono percentuali del viewport: l'area visibile della finestra. 1vw = 1% della larghezza del viewport, 1vh = 1% della sua altezza. vmin prende il più piccolo tra vw e vh; vmax il più grande.

.hero { 
   width: 100vw; /* copre tutta la larghezza visibile */ 
   height: 100vh; /* copre tutta l'altezza visibile */ 
}

Utile per elementi a piena pagina (una hero section, un modale a schermo intero) che devono adattarsi a schermi di ogni dimensione senza una singola media query.

3. dvh: quando la barra degli indirizzi si muove

Su mobile, 100vh ha un difetto famoso: il browser mostra e nasconde la barra degli indirizzi mentre scorri, e vh spesso non si aggiorna di conseguenza: un elemento a 100vh può risultare tagliato o lasciare uno spazio vuoto.

Le unità dinamiche (prefisso d: dvh, dvw) risolvono proprio questo: si ricalcolano quando l'interfaccia del browser cambia dimensione, restando sempre comprese tra il viewport «piccolo» (svh, con l'interfaccia espansa) e quello «grande» (lvh, con l'interfaccia ritratta).

.schermo-intero { 
   height: 100dvh; /* si adatta quando la barra indirizzi appare/scompare */ 
}

4. cqi: relativa al contenitore, non allo schermo

Le container query length units: cqi (dimensione inline, di norma la larghezza), cqb (dimensione block), funzionano come vw/vh, ma sono relative a un contenitore specifico (che deve avere container-type impostato), non all'intero schermo.

.card-contenitore { 
   container-type: inline-size; 
} 

.card-contenitore h2 { 
   font-size: 4cqi; /* dipende dalla larghezza DELLA CARD, non dello schermo */ 
}

Il vantaggio: la stessa card ridimensiona il proprio testo correttamente sia dentro una sidebar stretta sia dentro una hero larga, perché il riferimento è il suo contenitore, non il viewport dell'intera pagina.

5. clamp(): la scala fluida, con un limite di sicurezza

clamp(min, preferito, max) sceglie il valore preferito finché resta tra i due limiti e i limiti quando lo supera. Combinato con vw o cqi, crea una scala fluida: il testo cresce con continuità invece di saltare a scatti tra le media query.

h1 { 
   font-size: clamp(1.5rem, 4vw + 1rem, 3rem); /* min 1.5rem, max 3rem, cresce fluido nel mezzo */ 
}

Un avvertimento di accessibilità, verificato da Google web.dev: se il rapporto tra massimo e minimo supera 2,5 volte, il testo rischia di non superare più il criterio WCAG sul ridimensionamento del testo; usa em/rem per i limiti (non px), così restano legati alle preferenze font dell'utente.

Fonte: web.dev (Google): «Responsive and fluid typography»: se il max supera 2,5 volte il min, il testo passa il criterio WCAG 1.4.4 su tutti i browser moderni; usare em/rem come limiti per rispettare le preferenze utente.

In sintesi

La domanda resta sempre la stessa: relativo a cosa? Schermo, contenitore, o preferenze dell'utente, ogni unità risponde a un riferimento diverso, e nessuna è quella «giusta» in assoluto: dipende da cosa stai davvero misurando.