Unità del viewport

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 64 di 76.

In CSS, le unità viewport sono unità di misura relative basate sulle dimensioni del viewport del browser (l’area visibile della pagina web). Offrono un modo per creare design responsive dimensionando gli elementi e il testo in proporzione alla larghezza o all’altezza del viewport. Le unità viewport sono particolarmente utili per creare layout fluidi, ridimensionare il testo e posizionare gli elementi in modo da adattarsi a schermi di dimensioni diverse.

Ci sono quattro unità di viewport:

vw (larghezza della finestra di visualizzazione): rappresenta l'1% della larghezza della finestra di visualizzazione. Ad esempio, 10vw equivale al 10% della larghezza della finestra di visualizzazione.

vh (altezza del viewport): rappresenta l'1% dell'altezza del viewport. Ad esempio, 25vh equivale al 25% dell'altezza del viewport.

vmin (minimo della viewport): rappresenta l'1% della dimensione più piccola della viewport (larghezza o altezza). Ad esempio, se la viewport è più larga che alta, 5vmin equivale al 5% dell'altezza della viewport.

vmax (massimo dell'area visibile): rappresenta l'1% della dimensione maggiore dell'area visibile (larghezza o altezza). Per esempio, se l'area visibile è più larga che alta, 8vmax equivale all'8% della larghezza dell'area visibile.

Ecco la sintassi di base per usare le unità di viewport:

selector {
    property: value;
}

selector: Il selettore CSS che individua gli elementi HTML a cui vuoi applicare lo stile.

property: la proprietà CSS che vuoi impostare (ad esempio, width, height, font-size, margin, padding).

value: Un valore che include unità di viewport (ad es. 50vw, 75vh, 10vmin, 5vmax).

Per esempio:

.box {
    width: 50vw; /* La larghezza del riquadro sarà pari al 50% della larghezza dell'area di visualizzazione */
    height: 30vh; /* L'altezza del riquadro sarà pari al 30% dell'altezza dell'area di visualizzazione */
}

In questo esempio, l’elemento .box ha una larghezza di 50vw e un’altezza di 30vh, rendendolo adattabile sia alla larghezza sia all’altezza della viewport.

Sfida

Facile

Ti viene fornito un documento HTML con un'intestazione (<h1>), un paragrafo (<p>) e una divisione (<div>). Il tuo compito è usare le unità viewport per rendere questi elementi adattabili. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <h1>. Imposta il suo font-size su 6vw.
Scrivi una regola CSS che selezioni l'elemento <p>. Imposta il suo font-size su 4vmin.
Scrivi una regola CSS che selezioni l'elemento <div>. Imposta il suo width su 80vw e la sua height su 50vh.

Provalo tu

<html>
<head>
    <title>Viewport Units</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body style="background-color:lightblue">
    <h1>Antarctica</h1>  
    <p>The coldest continent, covered in ice and home to penguins and seals.</p>  
    <div>It has no permanent residents, only research stations.</div> 
</body>
</html>