Unità di visualizzazione CSS: avvio rapido. Unità vh, vw, vmin, vmax

Nuove unità relative sono state aggiunte in CSS3 come vh, vw, vmin, vmax. Queste unità sono calcolate in relazione alla dimensione della finestra del browser. Per i desktop, la finestra del browser è più ampia del viewport (aggiungendo la larghezza della barra di scorrimento), quindi se imposti la larghezza su 100vw per un elemento, supererà l'html.

Supporto browser

CIOÈ: 9.0 eccetto vmax, usa vm invece di vmin
Bordo: 12.0 eccetto vmax, usa vm invece di vmin
Firefox: 19.0
Cromo: 26.0
Musica lirica: 15.0
Safari: 6.1
Safari iOS: 8.0
Android: 4.4
Chrome per Android: 55.0

1. Le unità vh e vw

Le tecniche di web design responsive si basano sull'uso di percentuali. Ma le percentuali sono tutt'altro che la migliore soluzione per ogni caso, poiché sono calcolate rispetto alla dimensione dell'elemento genitore più vicino. Pertanto, se si desidera utilizzare l'altezza e la larghezza della finestra del browser, è meglio utilizzare le unità vh e vw. Ad esempio, se l'altezza della finestra del browser è 900 px, 1vh sarà 9 px. Allo stesso modo, se la larghezza della finestra del browser è 1600 px, 1vw sarà 16 px.

1.1. Immagine di sfondo reattiva a schermo intero

Poiché la larghezza dell'elemento specificata con 100vw è maggiore della larghezza della finestra, è meglio utilizzare la larghezza del 100% per creare immagini di sfondo a schermo intero, che sarà uguale alla larghezza dell'elemento html principale.

Fullscreen-bg (sfondo: url (image.jpg); posizione-sfondo: centro; dimensione-sfondo: copertina; larghezza: 100%; altezza: 100vh;) Riso. 2. Immagine di sfondo reattiva a schermo intero

1.2. Effetto diapositiva a pagina intera

Per fare in modo che il blocco si adatti all'intera altezza della finestra del browser, è necessario impostare l'altezza: 100%; per tre elementi - html, body e direttamente per il blocco stesso:

Html, sezione del corpo (altezza: 100%;) (altezza: 100%;)

Poiché le percentuali sono relative ai valori degli elementi padre, è necessario impostare i valori appropriati per ciascun elemento DOM. L'unità vh non richiede l'impostazione di valori lungo la catena, poiché il suo valore viene calcolato direttamente rispetto alla finestra del browser:

Sezione (altezza: 100vh;)

L'effetto di capovolgere le diapositive quando si fa clic su una freccia viene implementato utilizzando un piccolo script jQuery:

JQuery (document) .ready (function ($) ($ ("nav"). On ("click", function () (if ($ (this) .hasClass ("down")) (var movePos = $ (window ) .scrollTop () + $ (window) .height ();) if ($ (this) .hasClass ("top")) (var movePos = $ (window) .scrollTop () - $ (window) .height ( );) $ ("html, body"). animate ((scrollTop: movePos), 600);));));

L'altezza data con vh può essere utilizzata anche per centrare l'elemento sulla pagina.

Un articolo non è necessario.

1 pixel (pixel)= 1/96 di pollice, ma non in CSS. 1 px in CSS è un punto sullo schermo dell'utente, la cui dimensione fisica dipende dalla risoluzione del dispositivo e dalla distanza da cui una persona guarda la sua superficie (cellulare o TV). In qualunque unità di misura non scriviamo il codice, si riduce a px.

1 em= il valore della dimensione del carattere del genitore. Nota che nel poligono sotto la dimensione del carattere dei blocchi giallo e marrone è diversa, ma la dimensione del carattere è la stessa.

16 px * 1 = 16 px // giallo 16 px * 0,5 = 8 px // 8 px verde * 2 = 16 px // marrone

1 rem= valore della dimensione del carattere (elemento radice del documento).

16 px * 1 = 16 px // giallo 16 px * 0,5 = 8 px // 16 px verde * 2 = 32 px // marrone

1% (1%)- valore relativo al valore della proprietà del tag genitore.

16px * 100% = 16px // giallo 16px * 50% = 8px // verde 8px * 200% = 16px // marrone

Diminuendo la larghezza del genitore si riduce la larghezza dell'elemento, ma non il suo carattere.

1vw= 1% della larghezza della finestra. Quando si riduce la larghezza della finestra, la larghezza, l'altezza e il carattere dell'elemento diminuiscono. Il carattere non verrà ridimensionato quando si preme Ctrl + o Ctrl -.

1vh= 1% dell'altezza della finestra. Quando si riduce l'altezza della finestra, la larghezza, l'altezza e il carattere dell'elemento diminuiscono. Il carattere non verrà ridimensionato quando si preme Ctrl + o Ctrl -.

1vmin= 1vw o 1vh. Viene scelto quello più piccolo.

1vmax= 1vw o 1vh. Viene selezionato quello più grande.

dimensione del carattere: 16px 100% 1em 1vw 1vh 1vmin 1vmax 1rem;

dimensione del carattere: 8px 50% .5em .5vw .5vh .5vmin .5vmax .5rem;

dimensione del carattere: 32px 200% 2em 2vw 2vh 2vmin 2vmax 2rem;

Funzione Calc()

Hai mai desiderato sottrarre pixel o em dalle percentuali? Ad esempio, al fine di. Ora è possibile. La funzione calc() consente di implementare espressioni matematiche

Addizione (il carattere è separato da spazi su entrambi i lati) - sottrazione (il carattere è separato da spazi su entrambi i lati) * moltiplicazione / divisione

Ecco un altro esempio di prova.

• 1
• 2
• 3
• 4

Ho citato nuove (relativamente) unità di misura. Queste unità sono vw, vh, vmin e vmax e si basano sulla dimensione della finestra del browser. La loro dimensione effettiva cambia quando cambia la finestra del browser, rendendo queste unità ideali per i progetti reattivi. Mentre mi sono opposto all'utilizzo di queste unità per specificare le dimensioni dei caratteri nel mio post precedente, possono essere molto utili per lavorare con gli elementi del layout.

Unità di visualizzazione

Le unità di visualizzazione sono unità relative, il che significa che non possono essere misurate oggettivamente. La loro dimensione è determinata dalla dimensione della finestra nel browser. Ci sono quattro unità relative al viewport.

Mi concentrerò sui primi due in quanto sono i più comunemente usati. In molti casi, le unità di visualizzazione (vh e vw) si sovrappongono alle percentuali in termini di capacità. Tuttavia, ognuno ha i suoi punti di forza e di debolezza.

Per riassumere, ottieni quanto segue:

Quando si tratta di larghezza,% è migliore, e se con altezza, vh è migliore.

Elementi a pagina intera:%> vw

Come ho detto, vw determina la dimensione dell'elemento in base alla larghezza del viewport. Tuttavia, i browser calcolano la dimensione in base allo spazio della barra di scorrimento.

Se la larghezza della pagina è maggiore della larghezza della finestra, viene visualizzata una barra di scorrimento. Tuttavia, in realtà, la larghezza della finestra è maggiore della larghezza dell'elemento html

Viewport> html> corpo

Quindi, se imposti la larghezza dell'elemento su 100vw, l'elemento fuoriesce dall'html e dal corpo. In questo esempio, ho creato un bordo rosso attorno all'elemento html e ho riempito le sezioni con colori diversi.

A causa di questa sfumatura, è meglio creare elementi su tutta la larghezza della pagina utilizzando le percentuali, piuttosto che fare affidamento sulla larghezza del viewport.

Elementi a pagina intera: vh>%

Quando si creano elementi che devono avere la stessa altezza della pagina, è molto meglio usare vh invece di percent. Poiché la percentuale di un elemento è dimensionata rispetto al suo genitore, possiamo ottenere un elemento con un'altezza uguale all'altezza dello schermo solo se anche il suo genitore occupa l'intera altezza dello schermo. Ciò significa che dobbiamo posizionare l'elemento come fisso per rendere genitore l'elemento html, oppure dobbiamo ricorrere a qualche hack.

Usando vh, è abbastanza facile ottenere questo effetto:

Esempio (altezza: 100vh;)

Indipendentemente da come l'elemento di esempio è nidificato, può essere ridimensionato rispetto alla dimensione della finestra. Il problema dello scorrimento non ci disturberà poiché la maggior parte dei siti non ha una barra di scorrimento orizzontale.

Ecco alcuni esempi di come possono essere utilizzate le unità vh.

Immagini di sfondo a schermo intero

L'uso tipico dell'unità vh consiste nel creare un'immagine di sfondo che ricopra l'intera altezza e larghezza dello schermo, indipendentemente dalle dimensioni del dispositivo. Questo è abbastanza facile da fare.

Bg (posizione: relativa; sfondo: url ("bg.jpg") centro/copertina; larghezza: 100%; altezza: 100vh;)

Allo stesso modo, possiamo creare l'effetto "pagine" assegnando a ciascuna sezione la dimensione del viewport.

Sezione (larghezza: 100%; altezza: 100vh;)

Possiamo usare JavaScript per creare l'illusione di capovolgere la pagina.

$ ("nav"). on ("click", function () (if ($ (this) .hasClass ("down")) (var movePos = $ (window) .scrollTop () + $ (window) .height ();) if ($ (this) .hasClass ("up")) (var movePos = $ (window) .scrollTop () - $ (window) .height ();) $ ("html, body"). animate ((scrollTop: movePos), 1000);))

Immagine pieghevole

Vh può essere utilizzato anche per controllare la dimensione di un'immagine all'interno di una pagina. Ad esempio, all'interno di un articolo. Vogliamo assicurarci che qualsiasi immagine venga visualizzata completamente indipendentemente dalle dimensioni dello schermo.

Abbiamo bisogno del seguente codice

Img (larghezza: auto; / * Larghezza automatica per altezza proporzionale * / larghezza massima: 100%; / * Non supera la larghezza dell'elemento genitore * / altezza massima: 90vh; / * Non supera l'altezza del viewport * / margin: 2rem auto; )

Supporto browser

Poiché queste unità sono relativamente nuove, ci sono ancora problemi con alcuni browser.

Ecco come risolverli.

Dall'autore: sono passati alcuni anni dalla prima introduzione delle unità viewport nei CSS. Queste sono davvero unità di misura adattive per la lunghezza, il loro valore cambia per adattarsi alle dimensioni della finestra del browser. Se ne hai sentito parlare, ma non sei mai entrato nei dettagli, questo articolo è per te.

Unità di misura e loro significato

Ci sono 4 tipi di unità di visualizzazione in CSS: vh, vw, vmin e vmax.

Altezza finestra (vh) - in base all'altezza della finestra. Il valore 1vh è pari all'1% dell'altezza della finestra.

Larghezza della finestra (vw) - in base alla larghezza della finestra. Il valore 1vw è pari all'1% della larghezza della finestra.

Viewport minimo (vmin) - In base al lato minimo del viewport. Se l'altezza della finestra è inferiore alla larghezza, il valore 1vmin sarà pari all'1% dell'altezza. Allo stesso modo, se la larghezza è inferiore all'altezza, 1vmin sarà pari all'1% della larghezza della finestra.

Viewport massimo (vmax) - basato sul lato grande del viewport. Se l'altezza della finestra è maggiore della larghezza, il valore 1vmax sarà pari all'1% dell'altezza della finestra. Se la larghezza della finestra è maggiore dell'altezza, 1vmax sarà uguale all'1% della larghezza.

Vediamo quali valori otteniamo in diverse situazioni:

Se il viewport è largo 1200 px e alto 1000 px, 10vw sarà 120 px e 10vh sarà 100 px. Il viewport è più largo dell'altezza, quindi 10vmax sarà 120px e 10vmin sarà 100px.

Se ruoti il ​​dispositivo in modo che la larghezza sia 1000 px e l'altezza sia 1200 px, 10 vh sarà uguale a 120 px e 10 vw diventerà 100 px. È interessante notare che 10vmax rimarrà 120px, perché ora il valore è determinato dall'altezza del viewport. Anche il valore 10vmin rimarrà a 100px.

Se restringi la finestra del browser a 1000 px di larghezza e 800 px di altezza, 10vh sarà 80px e 10vw sarà 100px. Allo stesso modo, 10vmax diventerà 100px e 10vmin diventerà 80px.

Al momento, le unità di visualizzazione per te potrebbero non differire molto dalle percentuali, ma la differenza è grande. Nel caso delle percentuali, la larghezza e l'altezza dei figli dipendono dal blocco padre. Esempio:

Nella demo, puoi vedere come la larghezza del primo figlio è l'80% della larghezza del genitore. Il secondo figlio ha una larghezza di 80vw, il che lo rende più largo del genitore.

Applicazione di unità di visualizzazione

Queste unità si basano sulla dimensione della finestra, quindi sono molto utili in situazioni in cui la larghezza, l'altezza o la dimensione degli elementi devono cambiare a seconda delle dimensioni della finestra.

Immagini e sezioni di sfondo a schermo intero

Sul Web, puoi spesso trovare immagini di sfondo su elementi che occupano l'intero schermo. Lo stesso può essere fatto nella progettazione del sito Web in modo che una sezione separata su un prodotto o servizio occupi l'intero schermo. In questi casi, puoi impostare la larghezza degli elementi al 100% e l'altezza a 100vh.

Diamo un'occhiata al seguente esempio HTML: