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 unità 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 responsivi.
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.
È importante sottolineare come tali unità di misura possano essere associate a qualsiasi elemento dimensionabile. Ciò include, ad esempio, tutte le declinazioni delle proprietà margin, padding e per definire la grandezza di un testo.
vw (viewport width)
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, dimensioniamo 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 (viewport height)
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, dimensioniamo 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 altre due interessanti unità di misura: 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 schermi hanno lo stesso orientamento, quindi non sempre il lato maggiore è quello orizzontale. In altre parole:
vmaxè pari alla maggiore lunghezza travwevh;vminè pari alla minore lunghezza travwevh.
Su un classico computer dotato di monitor widescreen, il valore 1vmax sarà equivalente a 1vw. Viceversa, in un tablet in modalità portrait, il valore di 1vmax sarà equivalente a 1vh.
Applicazioni pratiche delle unità di misura viewport
Le unità di misura relative alla viewport non solo semplificano il lavoro degli sviluppatori, ma consentono anche di creare design altamente responsive. Ad esempio, un header può essere dimensionato in altezza utilizzando vh, permettendo così agli elementi al suo interno di adattarsi automaticamente ai vari schermi. Inoltre, è possibile utilizzare vw per definire larghezze di colonne in layout a griglia. Ecco un esempio di applicazione pratica:
.header { height: 15vh; }
.column { width: 20vw; }Conclusioni
Le relative length sono altamente raccomandate 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, a differenza delle unità di lunghezza assolute (si pensi, per esempio, a in) che, avendo una dimensione fissa, non sono scelte ottimali per progetti destinati a display dalle diagonali differenti (Desktop, smartphone, tablet). Questo approccio porta vantaggi notevoli in termini di pulizia e manutenibilità del codice.
