A cosa servono le unità di misura vh e vw quando si specificano le dimensioni in CSS?

Le unità di misura vh e vw in CSS vengono utilizzate per indicare dimensioni relative alle dimensioni della finestra del browser.

• vh (altezza della viewport): Rappresenta l'1% dell'altezza della viewport.
• vw (larghezza della viewport): Rappresenta l'1% della larghezza della viewport.

Il loro scopo principale è creare un design reattivo, in cui le dimensioni degli elementi dipendono dalle dimensioni attuali della finestra del browser, e non da valori fissi in pixel o dalle dimensioni degli elementi genitori. Questo permette di scalare facilmente elementi come sezioni a tutta altezza o larghezza dello schermo, font, immagini e altri componenti, garantendo un'esperienza di visualizzazione confortevole su dispositivi con diverse dimensioni dello schermo.

Ad esempio:

• height: 100vh; — rende l'elemento alto il 100% dell'altezza della viewport.
• width: 50vw; — rende l'elemento largo il 50% della larghezza della viewport.