Unità CSS – Qual è la differenza tra vh / vw e%?

Ho appena saputo di una nuova e rara unità CSS. vh e vw misurano rispettivamente la percentuale di altezza e larghezza della finestra.

Ho esaminato questa domanda da Stack Overflow, ma ha reso le unità ancora più simili.

Come funziona l’unità vw e vh

La risposta dice esplicitamente

vw e vh sono una percentuale della larghezza e altezza della finestra, rispettivamente: 100vw è 100% della larghezza, 80vw è 80%, ecc.

    Questo sembra esattamente lo stesso dell’unità % , che è più comune.

    In Strumenti per sviluppatori, ho provato a cambiare i valori da vw / vh a% e viceversa e ho ottenuto lo stesso risultato.

    C’è una differenza tra i due? Altrimenti, perché queste nuove unità sono state introdotte nel CSS3 ?

    100% può essere il 100% dell’altezza di qualsiasi cosa. Ad esempio, se ho un div genitore che è alto 1000px e un div child che è al 100% altezza, allora quel div child potrebbe teoricamente essere molto più alto dell’altezza del viewport, o molto più piccolo dell’altezza del viewport, anche se quel div è impostato al 100% altezza .

    Se invece faccio in modo che div bambino 100vh , allora riempirà solo il 100% dell’altezza del viewport , e non necessariamente il div genitore.

    Vedi questo jsfiddle :

    produzione

     body, html { height: 100%; } .parent { background: lightblue; float: left; height: 200px; padding: 10px; width: 50px; } .child { background: pink; height: 100%; width: 100%; } .viewport-height { background: gray; float: right; height: 100vh; width: 50px; } 

    So che la domanda è molto antica e @Josh Beam ha affrontato la più grande differenza, ma ce n’è ancora un’altra:

    Supponiamo che tu abbia un

    , figlio diretto di che vuoi riempire l’intera finestra, quindi usi width: 100vw; height: 100vh; width: 100vw; height: 100vh; . Funziona tutto uguale alla width: 100%; height: 100vh; width: 100%; height: 100vh; fino a quando non aggiungi più contenuti e viene visualizzata una barra laterale verticale. Dal momento che l’account vw per la barra laterale come parte del viewport, width: 100vw; sarà leggermente più grande della width: 100%; . Questa piccola differenza finisce con l’aggiungere una barra laterale orizzontale (necessaria per l’utente per vedere quella piccola larghezza extra) e, di conseguenza, l’altezza sarebbe anche leggermente diversa in entrambi i casi.

    Deve essere preso in considerazione al momento di decidere quale utilizzare, anche se la dimensione dell’elemento genitore è uguale alla dimensione del viewport del documento.

    Esempio:

    Usando la width:100vw; :

     .fullviewport { width: 100vw; height: 100vh; background-color: red; } .extracontent { width: 100vw; height: 20vh; background-color: blue; } 
       

    le unità vw (view-width) e vh (view-height) sono relazionali alla dimensione della vista-porta, dove 100vw o vh è il 100% della larghezza / altezza della vista-porta.

    Ad esempio, se una vista-porta è larga 1600px e si specifica qualcosa come 2vw, sarà equivalente al 2% della larghezza della vista o 32 px.

    % unità è sempre basata sulla larghezza dell’elemento genitore dell’elemento corrente

    Grazie per la risposta e l’esempio di codice, @IanC. Mi ha aiutato molto. Un chiarimento: credo che intendessi “barra di scorrimento” quando hai scritto “barra laterale”.

    Ecco alcune discussioni correlate sulle unità di visualizzazione che contano le barre di scorrimento che ho trovato utili:

    • Perché vw include la barra di scorrimento come parte del viewport?

    • L’utilizzo di 100vw causa il ritaglio orizzontale quando sono presenti barre di scorrimento verticali

    • Impedire 100vw dalla creazione di scroll orizzontali

    • Differenza tra larghezza: 100% e larghezza: 100vw?

    Le specifiche W3C per le unità vw, vh, vmin, vmax (le “lunghezze percentuali di visualizzazione”) indicano che “si presume che non esistano barre di scorrimento”.

    Apparentemente Firefox sottrae la larghezza della barra di scorrimento da 100vw, come il commento di @ Nolonar a Differenza tra larghezza: 100% e larghezza: 100vw? osserva, citando “Posso usare”.

    Posso usare , forse in tensione con la specifica (?), Dice che tutti i browser diversi da Firefox attualmente “erroneamente” considerano 100vw come l’intera larghezza della pagina, inclusa la barra di scorrimento verticale.