Ghid pentru unitățile de vizualizare CSS vw, vh, vmin, vmax

Proporția lungimilor procentuale, sau unități de vizualizare deoarece acestea sunt mai frecvent menționate, sunt unități de răspuns CSS care vă permit să definiți dimensiunile ca procent din lățimea sau lungimea portului de vizualizare. Unitățile de vizualizare pot fi destul de utile în cazurile în care alte unități CSS responsabile, cum ar fi procentele, sunt greu să facă muncă.

Cu toate ca Documentația W3C pe unitățile de vizualizare conține tot ce poate fi pus în teorie, nu este foarte verbose. Deci, în acest articol, vom analiza modul în care aceste unități CSS lucrează în practică.

Înălțimea ferestrei (vh) și lățimea ferestrei de vizualizare (vw)

W3C definește fereastra de vizualizare la fel de “dimensiunea blocului inițial care conține”. Cu alte cuvinte, fereastra de vizualizare este zona conținută în fereastra browserului sau orice altă zonă de vizionare pe ecran.

vw și vh Unități reprezintă procentul lățimii și înălțimii ferestrei de vizualizare reale. Ele pot lua o valoare între 0 și 100 conform următoarelor reguli:

 100vw = 100% din lățimea ferestrei de vizualizare 1vw = 1% din lățimea ferestrei de vedere 100vh = 100% din înălțimea ferestrei de vizualizare 1vh = 1% din înălțimea ferestrei de vizualizare 

Diferențe față de unitățile procentuale

Deci, cum sunt unitățile de vizualizare diferite decât unitățile procentuale? Unități procentuale moștenește dimensiunea elementului părinte în timp ce unitățile de vizualizare nu au. Unitățile de vizualizare sunt întotdeauna calculate ca procent din dimensiunea ferestrei de vizualizare. Ca rezultat, un element definit de unitățile de vizualizare poate depăși dimensiunea părintelui său.

Exemplu: secțiuni cu ecran complet

Secțiuni cu ecran complet sunt probabil cele mai cunoscute cazuri de utilizare a unităților de vizualizare.

HTML este destul de simplu; tocmai am trei secțiuni unul sub altul și vrem ca fiecare să facă asta acoperă întreg ecranul (dar nu mai mult).

În CSS, folosim 100vh ca înălţime valoare și 100% la fel de lăţime. Nu folosim vw unitate aici ca implicit, barele de scroll sunt, de asemenea, adăugate la dimensiunea ferestrei de vizualizare. Deci, dacă am fi folosit lățime: 100vw; regula a bara de derulare orizontală ar apărea la partea de jos a ferestrei browserului.

 * marja: 0; umplutura: 0;  secțiunea background-size: cover; fundal-poziție: centru; lățime: 100%; înălțime: 100vh;  .secția-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg'); . secțiunea-2 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .secția-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

În demonstrația de mai jos, puteți vedea acest lucru vh este cu adevărat o unitate receptivă.

Potrivit documentelor W3C, cele menționate mai sus problemă orizontală de defilare pot fi rezolvate prin adăugarea overflow: auto; regulă la elementul rădăcină. Această soluție funcționează numai parțial, deşi. Bara de derulare orizontală, într-adevăr, dispare, dar lăţime este încă calculată pe baza lățimii ferestrei de vedere (bara laterală inclusă), deci elementele vor fi puțin mai mari decât ar trebui să fie.

Aș spune, nu aș îndrăzni să folosesc vw unitate pornit dimensionarea elementelor full-screen din acest motiv. Nici macar nu avem nevoie de ea, ca de lățime: 100%; regula functioneaza perfect. Cu aspectul ecranului complet, adevărata provocare a fost întotdeauna cum să setați o valoare corespunzătoare a înălțimii si vh unitatea oferă o soluție genială pentru asta.

Alte cazuri de utilizare

Dacă sunteți interesat alte cazuri de utilizare vw și vh Lullabot are un articol grozav care listează a o multime de exemple din viata reala (cu demonstrații Codepen), cum ar fi:

• Carduri cu rate fixe.
• Păstrarea unui element mai scurt decât ecranul.
• Scalarea textului.
• Eliminarea din container.

Opera.dev are, de asemenea, un scurt tutorial cu privire la modul în care puteți lua pârghie de vw unitate în crearea de tipografie receptivă.

Nu puteți utiliza numai unități de vizualizare în lăţime și înălţime dar pe oricare altul. De exemplu, puteți setați dimensiunea plăcuțelor și margini folosind vw și vh unități.

Valoarea vizualizării min (Vmin) și max.Vmax)

Vmin și Vmax unitățile vă permit să accesați mărimea laturii mai mici sau mai mari din portul de vizualizare, conform următoarelor reguli:

 100vmin = 100vw sau 100vh, oricare dintre acestea este mai mică 1vmin = 1vw sau 1vh, oricare dintre acestea este mai mică 100vmax = 100vw sau 100vh, oricare dintre acestea este mai mare 1vmax = 1vw sau 1vh, oricare dintre acestea este mai mare 

Deci, în cazul unui a orientare portret, 100vmin este egal cu 100vw, ca punct de vedere mai mic decât orizontal. Pentru același motiv, 100vmax va fi egal cu 100vh.

În mod similar, în cazul a Orientarea peisajului, 100vmin este egal cu 100vh, ca punct de vedere mai mic decât la orizontală. Și, desigur, 100vmax va fi egal cu 100vw aici.

Exemplu: Faceți textele eroului citibile pe fiecare ecran

Vmin și Vmax unitățile sunt mult mai puțin cunoscute decât vw și vh. Cu toate acestea, ele pot fi utilizate excelent ca a substitui orientarea @mass-media întrebări. De exemplu, Vmin și Vmax pot veni la îndemână atunci când aveți elemente care ar putea părea ciudate la rate diferite de aspect.

Codul nou are un tutorial excelent în care discută despre cum poți păstrați textul eroului lizibil pe fiecare ecran, folosind Vmin unitate. Textele eroilor sunt predispuse să privească prea mic pe mobil și prea mare pe monitoare mari.

Iată principala idee a soluției lor:

 h1 font-size: 20vmin; font-family: Avenir, sans-serif; greutate font: 900; text-align: centru;  

În demo-ul Codepen, puteți să verificați cum Vmin rezolvă problema lizibilității textelor eroului. Accesați “Pagină plină” vezi pe Codepen, atunci redimensionați fereastra browserului atât pe orizontală cât și pe verticală pentru a vedea cum se schimbă textul eroului.

Suport pentru browser

După cum puteți vedea în graficul CanIUse de mai jos, suportul pentru browser este relativ bun pentru unitățile de vizualizare. Cu toate acestea, rețineți că unele versiuni ale IE și Edge nu acceptă Vmax. De asemenea, iOS 6 și 7 au o problemă cu vh unitate, care a fost fixat în iOS 8.