CSS3: utilizzo di viewport come unità di misura

CSS3: utilizzo di viewport come unità di misura

di Pubblicato: 5 Mar 2018 0 commenti

In CSS3 si può definire il meta tag viewport all’interno dei tag HEAD dell’html. Si tratta di una dichiarazione fondamentale e che oramai è presente in qualsiasi sito moderno, poiché da esso dipende sostanzialmente la possibilità di realizzare un tema responsive, e quindi adatto anche a tablet e smartphone. Un esempio classico è il seguente:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
</head>

Con questa dichiarazione infatti si determina che la misura del browser non è fissa, ma con content=”width-device-width” si misura in tempo reale la larghezza del browser. Nel caso di uno smartphone sarà sostanzialmente immutabile ma nel caso dell’ambiente desktop potremmo restringere la finestra del nostro browser e vedere un riposizionamento dei contenuti in base alla larghezza che abbiamo in quel preciso momento.

Tuttavia è meno noto che si possa utilizzare il viewport come unità di misura. Infatti in genere si utilizza per definire una box o un area (generalmente un tag DIV) i valori in percentuale come misura relativa, oppure in pixel nel caso di misura assoluta.

width: 100%;
width: 300px;

E’ però possibile definire una terza e quarta, sempre relativo ad una misurazione relativa, con il viewport. Ovvero dichiarare la distanza in larghezza e lunghezza rispetto alla parte che viene mostrata su schermo.

width: 100vw;
height: 90vh;

Quindi nel caso sopra se lo schermo è di 1000 pixel, 100vw corrisponderanno a 100 pixel. In questo caso il funzionamento non è sostanzialmente differente dal sistema a percentuale, solo che la percentuale è riferita a qualsiasi cosa e può anche uscire dall’area di visualizzazione, mentre con viewport non potrà eccedere tale confine.

Esistono, ma sostanzialmente solo per la cronaca, altri due unità di misura che sono vmin e vmax. Il secondo è sostanzialmente nullo poiché non è supportato da Internet Explorer. Queste due unità indicano rispettivamente la percentuale della parte più piccola e più grande del viewport. Come si può intuire sono due unità per situazioni che richiedono funzioni condizionali del CSS3.

Vuoi dire o aggiungere qualcosa?

sezione commenti aperta al pubblico

Non ci sono ancora commenti!

Puoi essere il primo a commentare.

Rispondi

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.