In CSS3 le unità viewport (vw, vh, vmin, vmax) sono unità di misura basate sull’area in cui il browser renderizza il sito. Cioè il vostro schermo meno lo spazio riservato al browser.
A volte si vuole formattare un elemento in base a tale finestra, una sidebar, per esempio. Questo può essere fatto utilizzando una unità di cui siamo tutti a conoscenza: le percentuali.
.sidebar { width: 25% }
Impostiamo l’altezza uguale alla viewport.
html, body { height: 100%; }
.sidebar { height: 100%; width: 100%; }
Che cosa c’è che non va qui? Perché l’html e il body richiedono un’altezza? Le percentuali sono relative alla sua proprietà parent. Quando l’altezza del parent è definita dai suoi child, non c’è una altezza nota da impostare, quindi l’altezza viene ignorata del tutto. Ciò significa che si dovrà impostare l’altezza su ogni elemento principale nella struttura del DOM. È qui che intervengono le nuove unità viewport.
Lunghezze Viewport-percentuali
Le unità viewport sono una nuova serie di unità progettate per i layout moderni: Siti One-Page, griglie a tutta larghezza, gestione corretta della tipografia, si basano sulle dimensioni della finestra. In precedenza, abbiamo affrontato queste sfide utilizzando le percentuali come detto in precedenza, o con JavaScript.
Questa nuova serie di unità consiste di quattro unità differenti. Due per ogni asse, ed un valore minimo e massimo per entrambe.
vw: 1 /100 della larghezza della viewport
vh: 1 /100 dell’altezza della viewport
vmin: 1/100 del lato più piccolo
Vmax: 1/100 del lato più grandeNota: IE9 usa vm invece di vmin. Non supporta vmax.
Giusto per chiarire: 1 vmax uguale a 1 vh in modalità verticale, mentre in modalità orizzontale, 1 vmax sarà pari 1 vw.
Spero di avermi illuminato almeno in parte sulle possibilità fornite dalle nuove unità viewport
