Unità della viewport: vw, vh, dvh

Le unità del viewport sono relative alle dimensioni del viewport del browser, ovvero all'area visibile della finestra del browser. Consentono di creare layout e tipografia che si adattano allo spazio disponibile sullo schermo.

1vw = 1% della larghezza del viewport. 100vw riempie l'intera larghezza del viewport. È utile per gli elementi a larghezza completa, senza le complicazioni delle percentuali.

1vh = 1% dell'altezza del viewport. 100vh riempie l'intera altezza del viewport. È una soluzione classica per le sezioni hero a schermo intero e le modali.

Nei browser per dispositivi mobili, l'altezza del viewport cambia quando l'interfaccia del browser (la barra degli indirizzi) viene mostrata o nascosta durante lo scorrimento. 100vh può includere o escludere in modo incoerente l'interfaccia del browser, causando la visualizzazione parziale dei contenuti.

dvh (dynamic viewport height) si aggiorna dinamicamente per riflettere l'altezza effettivamente visibile dopo l'adattamento dell'interfaccia del browser. Risolve il problema di 100vh sui dispositivi mobili.

CSS fornisce anche svh (altezza del viewport piccolo, che esclude sempre l'interfaccia del browser) e lvh (altezza del viewport grande, come se l'interfaccia fosse nascosta). Queste unità consentono di controllare con precisione il comportamento del viewport sui dispositivi mobili.

Utilizzare vw per font-size crea un testo che si adatta alle dimensioni dello schermo:

100vw include la larghezza della barra di scorrimento sui computer desktop. Se utilizzato senza attenzione, può causare un overflow orizzontale. Preferisca width: 100% per gli elementi di blocco e riservi vw ai casi specifici.

1vmin = 1% della dimensione minore del viewport (larghezza o altezza). 1vmax = 1% della dimensione maggiore. Sono utili per i contenitori quadrati che si adattano ai cambiamenti di orientamento.

Come per l'altezza, CSS fornisce svw, lvw e dvw per la larghezza. Le varianti dinamiche (dvw, dvh) sono le più utili sui dispositivi mobili.

Schemi comuni per le unità del viewport:

• min-height: 100dvh — sezioni a schermo intero sicure sui dispositivi mobili
• height: 100svh — pannelli dell'interfaccia con altezza fissa
• font-size: clamp(1rem, 2.5vw, 2rem) — titoli fluidi
• width: min(800px, 90vw) — contenitori con larghezza sicura

vw e vh corrispondono all'1% della larghezza e dell'altezza del viewport. Sui dispositivi mobili, vh non è affidabile a causa dell'interfaccia del browser. Utilizzi dvh per layout a schermo intero dinamici e accurati sui dispositivi mobili. vmin e vmax rispondono rispettivamente alla dimensione minore e maggiore del viewport.