Vodnik po pregledovalniku CSS Enote vw, vh, vmin, vmax

Dolžina prikaza v odstotkih, ali enote pogleda kot so bolj pogosto omenjene, so odzivne enote CSS, ki vam omogočajo, da določite dimenzije kot odstotek širine ali dolžine pogleda. Enote Viewport so lahko zelo uporabne v primerih, ko so druge odzivne enote CSS, kot so odstotki težko delati.

Čeprav Dokumentacija W3C na enotah pogleda so vse, kar je mogoče postaviti v teorijo, saj ni zelo natančno. Torej, v tem članku bomo pogledali, kako te CSS enote v praksi.

Višina prikaza (vh) & širina prikaza (vw)

W3C določa pogled kot “velikost začetnega bloka”. Z drugimi besedami, pogled je območje v oknu brskalnika ali katero koli drugo območje gledanja na zaslonu.

The vw in vh enot stojalo za odstotek širine in višine dejanskega vidnega polja. Lahko imajo vrednost med 0 in 100 v skladu z naslednjimi pravili:

 100vw = 100% širine prikaza 1vw = 1% širine vidnega polja 100vh = 100% višine prikaza 1vh = 1% višine pogleda 

Razlike v odstotnih enotah

Torej, kako se enote pogleda razlikujejo od odstotnih enot? Odstotne enote podedujejo velikost nadrejenega elementa medtem ko ogledne enote ne. Enote pogleda so vedno izračunane kot odstotek velikosti prikaza. Posledično lahko element, ki ga določijo enote pogleda, preseže velikost njegovega nadrejenega.

Primer: Celozaslonski odseki

Odseki celotnega zaslona so verjetno najbolj znani primeri uporabe enot pogleda.

The HTML je dokaj preprost; pravkar imamo trije deli in želimo, da bi vsak od njih pokrijte celoten zaslon (vendar ne več).

V CSS-ju uporabljamo 100vh kot višine vrednosti 100% kot premer. Ne uporabljamo vw tukaj je privzeto, dodani so tudi drsni trakovi velikosti zaslona. Torej, če smo uporabili širina: 100vw; pravilo a vodoravni drsni trak bi se pojavila na spodaj okna brskalnika.

 * margin: 0; oblazinjenje: 0;  odsek velikost ozadja: naslovnica; položaj ozadja: središče; širina: 100%; višina: 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 spodnji predstavitvi gif lahko to vidite vh je resnično odzivna enota.

V skladu z dokumenti W3C je prej omenjeno horizontalno vprašanje drsnega traku je mogoče rešiti z dodajanjem overflow: auto; pravilo do korenskega elementa. Ta rešitev deluje samo delno, čeprav. Horizontalni drsni trak dejansko izgine, vendar premer je še vedno izračunana na podlagi širine prikaza (stranska vrstica je vključena), zato bodo elementi nekoliko večji, kot bi morali biti.

Rekel bi, ne bi si upal uporabiti vw enota dimenzioniranje elementov na celotnem zaslonu zaradi tega razloga. Ne potrebujemo ga niti kot širina: 100%; pravilo deluje odlično. S celozaslonskimi postavitvami je bil pravi izziv vedno, kako nastavite ustrezno vrednost višine in vh enota daje odlično rešitev za to.

Drugi primeri uporabe

Če vas zanima druge primere uporabe vw in vh Lullabot ima odličen članek, ki navaja a primerov iz resničnega življenja (s predstavitvami Codepen), kot so:

• Kartice s fiksnim razmerjem.
• Ohranjanje elementa krajšega od zaslona.
• Prilagajanje besedila.
• Izločanje iz posode.

Opera.dev ima tudi kratek vodič o tem, kako lahko vzamete vzvod vw v ustvarjanje odzivne tipografije.

V meniju premer in višine lastnine, ampak na katero koli drugo. Na primer, lahko nastavite velikost poljih in robov uporabljati vw in vh enot.

Min.vmin) & maks.vmax)

The vmin in vmax enote omogočajo dostop do velikosti manjše ali večje strani vidnega polja v skladu z naslednjimi pravili:

 100vmin = 100vw ali 100vh, kar je manjše 1vmin = 1vw ali 1vh, kar je manjše 100vmax = 100vw ali 100vh, kar je večje 1vmax = 1vw ali 1vh, kar je večje 

Torej, v primeru a pokončna usmerjenost, 100vmin je enako 100vw, kot je prikazovalnik manj vodoravno kot navpično. Iz istega razloga, 100vmax bo enako 100vh.

Podobno, v primeru a krajinska usmerjenost, 100vmin je enako 100vh, kot je prikazovalnik manjša navpično kot vodoravno. In seveda, 100vmax bo enako 100vw tukaj.

Primer: Naredite besedila junaka berljiva na vsakem zaslonu

The vmin in vmax enote veliko manj znane kot vw in vh. Lahko pa se odlično uporabljajo kot nadomestilo za orientacijo @media poizvedb. Na primer, vmin in vmax lahko pridejo v poštev, če imate elemente, ki so videti čudni pri različnih razmerjih.

Nova koda je odlična vadnica, v kateri razpravljajo o tem, kako lahko ohranite besedilo junaka berljivega na vsakem zaslonu z uporabo vmin enoto. Besedila junaka so nagnjena k izgledu premajhna na mobilnih napravah in prevelika na velikih monitorjih.

Tu je glavna ideja njihove rešitve:

 h1 velikost pisave: 20vmin; družina pisav: Avenir, sans-serif; teža pisave: 900; text-align: center;  

V demonu Codepen si lahko ogledate, kako vmin rešuje problem berljivosti junakov. Dostop do “Celotna stran” potem pogled na Codepen spremenite velikost okna brskalnika vodoravno in navpično, da vidite, kako se spreminja besedilo junaka.

Podpora za brskalnik

Kot lahko vidite na spodnji tabeli CanIUse, podpora brskalniku je relativno dobra za enote pogleda. Vendar ne pozabite, da nekatere različice IE in Edge ne podpirajo vmax. Tudi iOS 6 in 7 imata težave z vh enoto, ki je bila določena v sistemu iOS 8.