Vodič za CSS Viewport Jedinice vw, vh, vmin, vmax

Duljine postotaka prikaza, ili jedinice prikaza kao što se češće spominju, odgovaraju CSS jedinice koje vam omogućuju definiranje dimenzija kao postotak širine ili duljine okvira za prikaz. Jedinice prikaza mogu biti vrlo korisne u slučajevima u kojima su druge osjetljive CSS jedinice, kao što su postoci teško raditi.

Iako W3C-ova dokumentacija na jedinicama prikaza sadrži sve što se može staviti u teoriju, nije baš opširno. Tako ćemo u ovom članku pogledati kako te CSS jedinice rad u praksi.

Visina prikaza (VH) i širina prikaza (VW)

W3C definira okvir za prikaz kao “veličina početnog bloka”. Drugim riječima, prikaz je područje sadržane u prozoru preglednika ili bilo koje drugo područje gledanja na zaslonu.

VW i VH jedinice označite postotak širine i visine stvarnog okvira za prikaz. Mogu uzeti vrijednost između 0 i 100 prema sljedećim pravilima:

 100vw = 100% širine okvira prikaza 1vw = 1% širine okvira prikaza 100vh = 100% visine prikaza 1vh = 1% visine prikaza 

Razlike u postotnim jedinicama

Dakle, kako se jedinice prikaza razlikuju od postotnih jedinica? Postotne jedinice naslijediti veličinu svog nadređenog elementa dok jedinice prikaza ne. Jedinice prikaza uvijek se izračunavaju kao postotak veličine prikaza. Kao rezultat, element definiran jedinicama za prikaz može premašiti veličinu njegovog nadređenog.

Primjer: odjeljci na cijelom zaslonu

Odjeljci na cijelom zaslonu vjerojatno su najpoznatiji slučajevi uporabe jedinica prikaza.

HTML je vrlo jednostavan; imamo samo tri sekcije jedna ispod druge i želimo da svaki od njih pokrijte cijeli zaslon (ali ne više).

U CSS-u koristimo 100vh kao visina vrijednost i 100% kao širina. Ne koristimo VW ovdje po defaultu, scrollbars su također dodani do veličine prikaza. Dakle, ako koristimo širina: 100vw; pravilo a vodoravni klizač će se pojaviti na dnu prozora preglednika.

 * margin: 0; padding: 0;  odjeljak veličina pozadine: omot; položaj pozadine: centar; širina: 100%; visina: 100vh;  .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');  

Na donjoj gif demo, možete to vidjeti VH je doista osjetljiva jedinica.

Prema W3C dokumentima, spomenuto horizontalno pitanje klizača može se riješiti dodavanjem preljev: auto; pravilo na korijenski element. Ovo rješenje djeluje samo djelomično, iako. Horizontalni klizač, zapravo, nestaje, ali širina je i dalje se izračunava na temelju širine okvira prikaza (sidebar uključen), tako da će elementi biti malo veći nego što bi trebali biti.

Rekao bih, ne bih se usudio koristiti VW jedinica dimenzioniranje elemenata cijelog zaslona zbog toga. Ne treba nam čak ni kao širina: 100%; Pravilo radi savršeno. S prikazima preko cijelog zaslona, ​​pravi je izazov uvijek bio postavite odgovarajuću vrijednost visine i VH jedinica daje sjajno rješenje za to.

Drugi slučajevi uporabe

Ako ste zainteresirani drugim slučajevima uporabe VW i VH Lullabot ima sjajan članak koji navodi a nekoliko primjera iz stvarnog života (s kodnim demoima), kao što su:

• Kartice s fiksnim omjerom.
• Držite element kraći od zaslona.
• Skaliranje teksta.
• Lomljenje iz spremnika.

Opera.dev također ima kratki vodič o tome kako možete iskoristiti utjecaj VW jedinica u stvaranje odgovarajućih tipografija.

Jedinice prikaza ne možete koristiti samo na širina i visina svojstva, ali na bilo koji drugi. Na primjer, možete postavite veličinu polica i margina koristiti VW i VH jedinica.

Min.vmin) & maksimum prikaza (vmax)

vmin i vmax jedinice omogućuju vam pristup veličine manje ili veće strane prozora za prikaz, prema sljedećim pravilima:

 100vmin = 100vw ili 100vh, što god je manje 1vmin = 1vw ili 1vh, što god je manje 100vmax = 100vw ili 100vh, što god je veće 1vmax = 1vw ili 1vh, što god je veće 

Dakle, u slučaju a portretna orijentacija, 100vmin jednako je 100vw, kao i okvir za prikaz manje vodoravno nego okomito. Iz istog razloga, 100vmax bit će jednako 100vh.

Slično tome, u slučaju a pejzažna orijentacija, 100vmin jednako je 100vh, kao i okvir za prikaz manji okomito nego vodoravno. I naravno, 100vmax bit će jednako 100vw ovdje.

Primjer: Napravite čitanje junaka tekstovima na svakom zaslonu

vmin i vmax jedinice su mnogo manje poznate nego VW i VH. Međutim, mogu se izvrsno koristiti kao zamjena za orijentaciju @media upita. Na primjer, vmin i vmax može vam biti od koristi kada imate elemente koji mogu izgledati čudno u različitim omjerima.

Novi kôd ima odličan vodič u kojem se raspravlja o tome kako možete zadržite heroj tekst čitljivim na svakom zaslonu, koristeći vmin jedinica. Tekstovi heroja su skloni izgledu premali na mobitelu i preveliki na velikim monitorima.

Evo glavne ideje njihovog rješenja:

 h1 veličina-fonta: 20vmin; obitelj fontova: Avenir, sans-serif; težina fonta: 900; poravnavanje teksta: centar;  

U demo Codepen, možete provjeriti kako vmin rješava problem čitljivosti junaka. Pristupite “Cijela stranica” zatim na Codepen promijenite veličinu prozora preglednika vodoravno i okomito da biste vidjeli kako se mijenja tekst heroj.

Podrška za preglednik

Kao što možete vidjeti na donjoj tablici CanIUse, podrška za preglednik je relativno dobra za jedinice prikaza. Međutim, imajte na umu da neke verzije IE i Edge ne podržavaju vmax. Također, iOS 6 i 7 imaju problema s VH jedinica, koja je fiksna u sustavu iOS 8.