CSS Viewport ühikute vw, vh, vmin, vmax juhend

Viewport-protsendipikkused, või vaatepordi üksused kui neid sagedamini nimetatakse, on reageerivad CSS-üksused, mis võimaldavad teil määratleda mõõtmeid protsendina vaatepordi laiusest või pikkusest. Viewport ühikud võivad olla üsna kasulikud juhtudel, kui teised reageerivad CSS-üksused, näiteks protsendid, on raske tööd teha.

Kuigi W3C dokumentatsioon vaatepiirkonna üksustes on kõik, mida saab teooriasse panna, see ei ole väga verbose. Niisiis, selles artiklis vaatame, kuidas need CSS-üksused praktikas.

Viewporti kõrgus (vh) & vaateava laius (vw)

W3C määratleb vaateava nagu “esialgse sisaldava ploki suurus”. Teisisõnu on vaatlusport ala brauseri aknas või mis tahes muu vaateala ekraanil.

The vw ja vh üksused näidata tegeliku vaatluspordi laiuse ja kõrguse protsenti. Nad võivad võtta väärtuse vahemikus 0 kuni 100 vastavalt järgmistele reeglitele:

 100vw = 100% vaateava laiusest 1vw = 1% vaateava laiusest 100vh = 100% vaateava kõrgusest 1vh = 1% vaateava kõrgusest 

Erinevused protsentides

Niisiis, kuidas erinevad vaatluspordi ühikud protsentuaalsetest ühikutest? Protsentühikud pärida oma vanema elemendi suurus vaatlusportaali üksused ei ole. Viewport ühikud arvutatakse alati kui protsent vaatluspordi suurusest. Selle tulemusena võib vaatluspordi üksuste poolt määratletud element ületada oma vanema suurust.

Näide: täisekraanilõigud

Täisekraanilõigud on ilmselt kõige enam tuntud vaatluspordi üksuste kasutusjuhud.

The HTML on üsna lihtne; meil on lihtsalt kolm lõiku üksteise all ja me tahame, et igaüks neist katta kogu ekraani (kuid mitte rohkem).

CSSis kasutame 100vh nagu kõrgus väärtus ja 100% nagu laius. Me ei kasuta seda vw üksus siin vaikimisi, lisatakse ka kerimisribad vaateava suurusele. Niisiis, kui me seda kasutasime laius: 100vw; reegel a horisontaalne kerimisriba ilmuks brauseri akna all.

 * marginaal: 0; polster: 0;  sektsioon tausta suurus: kaan; taustapositsioon: keskus; laius: 100%; kõrgus: 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');  

Allpool olevast gif-demost näete seda vh on tõesti reageeriv üksus.

W3C dokumentide kohaselt on ülalnimetatud horisontaalse kerimisriba probleem saab lahendada ülevool: auto; reegel juurelementi. See lahendus töötab ainult osaliselt, küll. Horisontaalne kerimisriba tõepoolest kaob, kuid laius on arvutatakse ikka veel vaateakna laiuse alusel (kaasas on külgriba), nii et elemendid on veidi suuremad kui need peaksid olema.

Ma ütleksin, et ma ei julgeks seda kasutada vw üksus sisse lülitatud täisekraani elementide suurus sel põhjusel. Meil pole seda isegi vaja laius: 100%; reegel toimib suurepäraselt. Täisekraani paigutusega on tõeline väljakutse alati olnud seadke õige kõrguse väärtus ja vh üksus annab sellele suurepärase lahenduse.

Muud kasutusjuhud

Kui olete huvitatud muud kasutusjuhud vw ja vh Lullabotil on suurepärane artikkel, mis loetleb a mõned tegelikud näited (koos Codepeni demodega), näiteks:

• Fikseeritud suhe kaardid.
• Hoides elementi lühem kui ekraan.
• Skaleerimise tekst.
• Mahuti purunemine.

Opera.dev-il on ka lühike õpetus selle kohta, kuidas saaksite vw üksus tundliku tüpograafia loomine.

Sa ei saa kasutada ainult vaateava üksusi laius ja kõrgus omadusi, kuid mis tahes teisele. Näiteks saate määrake paddings ja marginaalid kasutades vw ja vh üksused.

Viewport min (vmin) & viewport max (vmax)

The vmin ja vmax üksused võimaldavad teil juurdepääsu väiksema või suurema külje suurus vaatenurka vastavalt järgmistele reeglitele:

 100vmin = 100vw või 100vh, olenevalt sellest, kumb on väiksem 1vmin = 1vw või 1vh, olenevalt sellest, kumb on väiksem 100vmax = 100vw või 100vh, olenevalt sellest, kumb on suurem 1vmax = 1vw või 1vh, olenevalt sellest, kumb on suurem 

Niisiis, a puhul portree orientatsioon, 100vmin on võrdne 100vw, kui vaateava on väiksem kui vertikaalselt. Samal põhjusel, 100vmax on võrdne 100vh.

Samamoodi on a maastiku orientatsioon, 100vmin on võrdne 100vh, kui vaateava on väiksem kui horisontaalselt. Ja muidugi, 100vmax on võrdne 100vw siin.

Näide: tehke kangelaste tekstid loetavaks igal ekraanil

The vmin ja vmax üksused on palju vähem tuntud kui vw ja vh. Siiski võib neid suurepäraselt kasutada a asendada orientatsiooni @media päringuid. Näiteks, vmin ja vmax võib olla mugav, kui teil on elemente, mis võivad tunduda kummalised erineva kuvasuhtega.

Uuel koodil on suurepärane juhendaja, kus nad arutavad, kuidas saate hoida kangelase teksti loetavana igal ekraanil, kasutades vmin üksus. Kangelase tekstid on altid vaatama liiga väikesed ja suured monitorid liiga suured.

Siin on nende lahenduse peamine idee:

 h1 font-size: 20vmin; font-pere: Avenir, sans-serif; font-kaal: 900; teksti joondamine: keskus;  

Codepeni demos saate vaadata, kuidas vmin lahendab kangelaste tekstide loetavuse probleemi. Juurdepääs “Täielik lehekülg” vaade Codepenist muutke brauseri akna suurust nii horisontaalselt kui ka vertikaalselt, et näha, kuidas kangelase tekst muutub.

Brauseri tugi

Nagu näete allpool toodud CanIUse'i tabelis, brauseri tugi on suhteliselt hea vaatepordi üksuste jaoks. Kuid pidage meeles, et mõned IE ja Edge versioonid ei toeta vmax. Samuti on iOS 6 ja 7 probleemiga vh üksus, mis kinnitati iOS 8-s.