CSS: dimensioni relative alla viewport con vw, vh, vmin e vmax

Con l’avvento e la diffusione di CSS 3 e del responsive design hanno preso piede nuove unità di misura legate alla dimensione dello schermo o, più propriamente, della viewport. Queste nuove unità di misura utilizzate nei CSS sono vw, vh, vmin e vmax.

Queste non sostituiscono, ovviamente, le tradizionali unità di misura di CSS (px, em e % su tutte) ma si affiancano ad esse offrendo allo sviluppatore nuovi strumenti per la creazione di interfacce utente responsive.

Unità di misura relative alla dimensione della viewport

Con CSS 3 si è avvertita la necessità di offrire allo sviluppatore nuove unità di misura relative alla dimensione della viewport (finestra del browser). Si parla, appunto, di relative length in quanto il valore espresso non è assoluto (come nel caso di px o in) ma relativo ad un’altra dimensione: quando l’altezza e/o larghezza della viewport viene modificata, le dimensioni espresse con tali nuove unità di misura vengono scalate di conseguenza.

E’ appena il caso di sottolineare come tali unità di misura possano essere associate a qualsiasi elemento dimensionabile, come per esempio in tutte le declinazioni delle proprietà margin, padding o per definire la grandezza di un testo.

vw

Attraverso vw la dimensione di un elemento viene rapportata alla larghezza della viewport. Può avere un valore compreso tra 1 e 100 dove ogni unità corrisponde all’1% della larghezza della finestra.

Esempio:

p { font-size: 2vw; }

Con questa istruzione vado a dimensionare il font dei paragrafi al 2% della larghezza della viewport. In altre parole se la nostra finestra ha un’ampiezza di 1200 pixel il font avrà una dimensione di 24 pixel (pari, appunto, al 2% di 1200).

vh

Attraverso vh la dimensione di un elemento viene rapportata all’altezza’ della viewport. Può avere un valore compreso tra 1 e 100 dove ogni unità corrisponde all’1% dell’altezza della finestra.

Esempio:

p { font-size: 3vh; }

Con questa istruzione vado a dimensionare il font dei paragrafi al 3% dell’altezza della viewport. In altre parole se la nostra finestra ha un’altezza di 700 pixel il font avrà una dimensione di 21 pixel (pari, appunto, al 3% di 700).

vmin e vmax

Oltre a vw e vh, CSS 3 ha introdotto alre due interessanti unità di misura. Si tratta di vmin e vmax.

vmax esprime un valore relativo al lato maggiore della viewport, mentre vmin definisce un valore in relazione al lato minore dell’area di visualizzazione (si ricordi che non tutti gli schremi hanno lo stesso orientamento quindi non sempre il lato maggiore è quello orizzontale). In altre parole:

• vmax è pari alla maggiore lunghezza tra vw e vh;
• vmin è pari alla minore lunghezza tra vw e vh.

Su un classico computer dotato di monitor widescreen il valore 1vmax sarà equivalente a 1vw. Viceversa in un tablet in modalita portrait il valore di 1vmax sarà equivalente a 1vh.

Conclusioni

Le relative length sono consigliate per il design responsivo in quanto semplificano il lavoro dello sviluppatore e riducono l’utilizzo di codice CSS (non sono necessarie media query per gestire i dimensionamenti), cosa che non accade invece per le unità di lunghezza assolute (si pensi per esempio a in) che, avendo una dimensione fissa, non rappresentano delle scelte ottimali per progetti destinati a display dalle diagonali differenti (Desktop, smartphone, tablet) e impongono la scrittura di molto più codice CSS per gestirne la variazione in base alla dimensione dello schermo.