Unità relative: %, em, rem, vh, vw, dvh

Fino a questo momento abbiamo usato prevalentemente i px (pixel) per misurare dimensioni, margini e testi. Il pixel è un’unità assoluta: 100px sono 100px, sia su un orologio smart che su un televisore 4K.

Tuttavia, un design veramente “Responsive” non si limita a far scattare i layout con le Media Queries; dovrebbe “respirare” fluidamente. Per questo dobbiamo usare le Unità Relative, che calcolano la loro dimensione in base a qualcos’altro.

1. Percentuale (%)

È la più intuitiva. Si riferisce alla dimensione dell’elemento Genitore. Se un contenitore genitore è largo 800px, e assegni a un figlio width: 50%;, il figlio sarà largo esattamente 400px. Se l’utente restringe il browser, anche il figlio si stringerà in proporzione.

(Attenzione: usare % per le altezze height spesso non funziona a meno che il genitore non abbia un’altezza fissa esplicita, a causa del flusso del documento).

2. Le unità legate al Font: em e rem

Queste sono fondamentali per la tipografia e la spaziatura (margini/padding).

em

1 em equivale alla dimensione del font (font-size) dell’elemento stesso o del suo genitore diretto. Se un bottone ha font-size: 16px, impostare il suo padding a padding: 1em 2em; significherà avere 16px sopra/sotto e 32px a sinistra/destra. Se in futuro decidi di ingrandire il font del bottone a 20px, il padding scalerà automaticamente a 20px/40px senza toccare nient’altro!

rem (Root EM)

A causa della sua natura, em può impilarsi in cascata causando risultati matematici inaspettati se nidifichi molti elementi. rem risolve il problema calcolando il valore esclusivamente sulla dimensione del font dell’elemento radice del documento (<html>). Di default, su quasi tutti i browser, l’<html> ha un font-size di 16px. Quindi 1rem = 16px.

Oggi si usano spesso i rem per definire i font-size, anche per ragioni di accessibilità: se un utente aumenta il font base del browser, gli elementi definiti in rem si adattano di conseguenza.

3. Le unità legate allo Schermo: vw e vh

A differenza delle percentuali, queste unità non si curano dei genitori. Si riferiscono esclusivamente alla dimensione fisica della finestra del browser (Viewport).

• 1vw (Viewport Width) = 1% della larghezza dello schermo.
• 1vh (Viewport Height) = 1% dell’altezza dello schermo.

Vogliamo creare un’immagine “Hero” iniziale (come la copertina di un sito) che occupi sempre l’intera altezza dello schermo visibile, indipendentemente da quanto sia grande il monitor dell’utente?

.sezione-copertina {
  height: 100vh; /* Esattamente il 100% dell'altezza del tuo monitor */
}

Il problema mobile: l’unità dvh

Usando 100vh su uno smartphone, alcuni browser possono calcolare l’altezza ignorando barre dell’indirizzo o controlli inferiori. Il risultato è che una parte della sezione può finire sotto l’interfaccia del browser.

Per risolvere questo, nel 2022 è stata introdotta l’unità Dynamic Viewport Height (dvh). Se scrivi height: 100dvh;, il browser calcola dinamicamente l’altezza visibile, tenendo conto delle barre di navigazione del browser mobile. Per layout a tutto schermo su mobile, dvh è spesso più affidabile di vh.