Guida alle unità CSS Viewport vw, vh, vmin, vmax

Lunghezze percentuali della vista, o unità viewport come vengono più frequentemente indicati, le unità CSS reattive consentono di definire le dimensioni come percentuale della larghezza o della lunghezza della finestra. Le unità Viewport possono essere piuttosto utili nei casi in cui sono presenti altre unità CSS sensibili, come le percentuali difficile da fare.

Sebbene La documentazione del W3C sulle unità viewport contiene tutto ciò che può essere messo in teoria, non è molto dettagliato. Quindi, in questo articolo, daremo un'occhiata a come queste unità CSS lavoro in pratica.

Altezza del viewport (vh) e larghezza della vista (vw)

W3C definisce la vista come “dimensione del blocco contenente iniziale”. In altre parole, la vista è l'area contenuto all'interno della finestra del browser o qualsiasi altra area di visualizzazione su uno schermo.

Il vw e vh unità indica la percentuale della larghezza e dell'altezza del viewport effettivo. Possono prendere un valore tra 0 e 100 secondo le seguenti regole:

 100vw = 100% della larghezza della finestra 1vw = 1% della larghezza della finestra 100vh = 100% dell'altezza della finestra 1vh = 1% dell'altezza della finestra 

Differenze alle unità percentuali

Quindi, in che modo le unità viewport sono diverse dalle unità percentuali? Unità percentuali eredita la dimensione del loro elemento genitore mentre le unità viewport no. Le unità Viewport vengono sempre calcolate come percentuale della dimensione del viewport. Di conseguenza, un elemento definito dalle unità viewport può superare la dimensione del suo genitore.

Esempio: sezioni a schermo intero

Sezioni a schermo intero sono probabilmente i casi d'uso più noti delle unità viewport.

Il HTML è abbastanza semplice; abbiamo appena tre sezioni l'una sotto l'altra e vogliamo che ognuno di loro a coprire l'intero schermo (ma non di più).

Nel CSS, usiamo 100VH come un altezza valore e 100% come larghezza. Non usiamo il vw unità qui come impostazione predefinita, barre di scorrimento sono anche aggiunti alla dimensione del viewport. Quindi, se abbiamo usato il larghezza: 100vw; regola a barra di scorrimento orizzontale apparirebbe al parte inferiore della finestra del browser.

 * margine: 0; padding: 0;  section background-size: cover; posizione di sfondo: centro; larghezza: 100%; altezza: 100 vh;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Nella demo gif qui sotto, puoi vederlo vh è veramente un'unità reattiva.

Secondo i documenti del W3C, il suddetto problema di barra di scorrimento orizzontale può essere risolto aggiungendo il overflow: auto; regola per l'elemento radice. Questa soluzione funziona solo parzialmente, anche se. La barra di scorrimento orizzontale, infatti, scompare ma larghezza è ancora calcolato in base alla larghezza della finestra (la barra laterale inclusa), quindi gli elementi saranno leggermente più grandi di quanto dovrebbero essere.

Direi, non oserei usare il vw unità accesa dimensionamento degli elementi a schermo intero a causa di questo motivo. Non ne abbiamo nemmeno bisogno, come il larghezza: 100%; la regola funziona perfettamente. Con i layout a schermo intero, la vera sfida è sempre stata come impostare un valore di altezza corretto e il vh unità offre una soluzione brillante per questo.

Altri casi d'uso

Se sei interessato a altri casi d'uso vw e vh Lullabot ha un grande articolo che elenca a una manciata di esempi di vita reale (con le demo di Codepen), ad esempio:

• Carte a tasso fisso.
• Mantenere un elemento più corto dello schermo.
• Ridimensionamento del testo.
• Rottura fuori dal contenitore.

Opera.dev ha anche un breve tutorial su come è possibile sfruttare l'effetto vw unità in creando una tipografia reattiva.

Non puoi usare solo unità viewport su larghezza e altezza proprietà ma su qualsiasi altro. Ad esempio, puoi imposta la dimensione di padding e margini usando il vw e vh unità anche.

Viewport min (Vmin) e viewport max (vmax)

Il Vmin e vmax Le unità ti consentono di accedere a dimensione del lato più piccolo o più grande del viewport, secondo le seguenti regole:

 100vmin = 100vw o 100vh, a seconda di quale è più piccolo 1vmin = 1vw o 1vh, a seconda di quale è più piccolo 100vmax = 100vw o 100vh, a seconda di quale è maggiore 1vmax = 1vw o 1vh, quale è più grande 

Quindi, in caso di a Orientamento verticale, 100vmin è uguale a 100vw, come è il viewport più piccolo orizzontalmente che verticalmente. Per la stessa ragione, 100vmax sarà uguale a 100VH.

Allo stesso modo, in caso di a orientamento orizzontale, 100vmin è uguale a 100VH, come è il viewport più piccolo verticalmente che orizzontalmente. E naturalmente, 100vmax sarà uguale a 100vw Qui.

Esempio: rende leggibili i testi degli eroi su ogni schermo

Il Vmin e vmax le unità sono molto meno conosciute di vw e vh. Tuttavia, possono essere ottimamente utilizzati come a sostituire l'orientamento @media interrogazioni. Per esempio, Vmin e vmax può tornare utile quando hai elementi che possono sembrare strani a differenti proporzioni.

Il nuovo codice ha un ottimo tutorial in cui si discute di come è possibile mantenere leggibile il testo degli eroi su ogni schermo, usando il Vmin unità. I testi degli eroi sono inclini a guardare troppo piccolo per i dispositivi mobili e troppo grande per i monitor di grandi dimensioni.

Ecco l'idea principale della loro soluzione:

 h1 font-size: 20vmin; font-family: Avenir, sans-serif; font-weight: 900; allineamento del testo: centro;  

Nella demo Codepen, puoi controllare come Vmin risolve il problema di leggibilità dei testi degli eroi. Accedi a “Pagina intera” vista su Codepen, quindi ridimensiona la finestra del tuo browser sia orizzontalmente che verticalmente per vedere come cambia il testo dell'eroe.

Supporto per il browser

Come puoi vedere nella tabella CanIUse sotto, il supporto del browser è relativamente buono per unità viewport. Tuttavia, tieni presente che alcune versioni di IE e Edge non supportano vmax. Inoltre, iOS 6 e 7 hanno un problema con il vh unità, che è stato risolto in iOS 8.