Unità vw e vh in CSS

Le unità vw e vh permettono di impostare le dimensioni relative all'area di visualizzazione della finestra del browser. Vediamo un esempio.

Supponiamo di avere un div:

html<div></div>

Impostiamo una larghezza pari alla metà della larghezza dell'area di visualizzazione e un'altezza pari alla metà dell'altezza dell'area di visualizzazione:

cssdiv {
  width: 50vw;
  height: 50vh;
  margin: 30px auto;
  border: 1px solid red;
}

Vediamo il risultato: