CSS Viewport įrenginių vw, vh, vmin, vmax vadovas

„Viewport“ procentinis ilgis, arba peržiūros srities vienetų kaip jie dažniau minimi, yra atsakingi CSS vienetai, kurie leidžia jums apibrėžti matmenis procentą nuo peržiūros srities pločio arba ilgio. „Viewport“ vienetai gali būti gana naudingi tais atvejais, kai kiti reaguojantys CSS vienetai, pvz., Procentai, yra sunku dirbti.

Nors W3C dokumentacija „Viewport“ vienetuose yra viskas, ką galima įdėti į teoriją, tai nėra labai baisus. Taigi šiame straipsnyje mes peržiūrėsime, kaip šie CSS vienetai praktikoje.

Vaizdo įrašo aukštis (vh) ir peržiūros srities plotis (vw)

W3C apibrėžia peržiūros sritį kaip “pradinio bloko dydis”. Kitaip tariant, peržiūros sritis yra sritis naršyklės lange arba bet kurią kitą ekrano žiūrėjimo sritį.

The vw ir vh vienetų atitikti faktinio peržiūros srities pločio ir aukščio procentinę dalį. Jie gali būti vertingi nuo 0 iki 100 pagal šias taisykles:

 100vw = 100% peržiūros srities pločio 1vw = 1% peržiūros srities pločio 100vh = 100% peržiūros srities aukščio 1vh = 1% peržiūros srities aukščio 

Skirtumai nuo procentinių vienetų

Taigi, kaip skiriasi peržiūros elementai nuo procentinių vienetų? Procentiniai vienetai paveldėti savo pagrindinio elemento dydį o ne „viewport“ vienetai. Viewport vienetai visada skaičiuojami kaip procentas nuo peržiūros srities dydžio. Dėl to elementas, apibrėžtas peržiūros srities vienetų, gali viršyti savo tėvų dydį.

Pavyzdys: viso ekrano skyriai

Viso ekrano skyriai tikriausiai yra plačiausiai žinomi peržiūros srities vienetų naudojimo atvejai.

The HTML yra gana paprasta; mes tiesiog turime trys skyriai vienas po kito ir mes norime, kad kiekvienas iš jų padengti visą ekraną (bet ne daugiau).

CSS naudojame 100vh kaip aukštis vertė ir 100% kaip plotis. Mes nenaudojame vw vienetas čia kaip numatytasis, taip pat pridedamos slinkties juostos iki peržiūros srities dydžio. Taigi, jei mes naudojome plotis: 100vw; taisyklė a horizontali slinkties juosta pasirodytų naršyklės lango apačioje.

 * marža: 0; įdėklas: 0;  sekcija background-size: cover; fono padėtis: centras; plotis: 100%; aukštis: 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');  

Žemiau pateiktame „gif“ demonstracijoje galite matyti vh yra tikrai reaguojantis vienetas.

Pagal minėtus W3C dokumentus horizontalios slinkties juostos problema galima išspręsti pridedant perpildymas: auto; taisyklė į šaknų elementą. Šis sprendimas veikia tik iš dalies, nors. Iš tiesų horizontali slinkties juosta išnyksta, bet plotis yra vis dar apskaičiuojamas pagal peržiūros srities plotį (įtraukta šoninė juosta), todėl elementai bus šiek tiek didesni nei turėtų būti.

Sakyčiau, aš nenorėčiau naudoti vw įjungti viso ekrano elementų dydžio nustatymas dėl šios priežasties. Net to nereikia, kaip plotis: 100%; taisyklė veikia puikiai. Su viso ekrano maketais tikrasis iššūkis visada buvo tai, kaip nustatyti tinkamą aukščio vertę ir vh vienetas suteikia puikų sprendimą.

Kiti naudojimo atvejai

Jei jus domina kiti naudojimo atvejai vw ir vh „Lullabot“ turi puikų straipsnį, kuriame yra a keletas realių gyvenimo pavyzdžių (su „Codepen“ demonstracijomis), pavyzdžiui:

• Fiksuotos proporcijos kortelės.
• Laikykite elementą trumpesnį už ekraną.
• Teksto mastelio keitimas.
• Ištraukite iš konteinerio.

„Opera.dev“ taip pat turi trumpą pamoką apie tai, kaip galite pasinaudoti svertu vw vienetas kuriant atsakingą tipografiją.

Jūs negalite naudoti tik peržiūros srities vienetų plotis ir aukštis savybes, bet bet kurį kitą. Pavyzdžiui, galite nustatyti pakabų ir paraščių dydį naudojant vw ir vh taip pat.

„Viewport min“ (vmin) & viewport maks.vmax)

The vmin ir vmax vienetai leidžia jums pasiekti mažesnės arba didesnės pusės dydis peržiūros srities, pagal šias taisykles:

 100vmin = 100vw arba 100vh, atsižvelgiant į tai, kas yra mažesnė 1vmin = 1vw arba 1vh, atsižvelgiant į tai, kas yra mažesnė 100vmax = 100vw arba 100vh, atsižvelgiant į tai, kuris yra didesnis 1vmax = 1vw arba 1vh, priklausomai nuo to, kuris yra didesnis 

Taigi, a atveju portreto orientacija, 100vmin yra lygus 100vw, kaip peržiūros sritis mažesnis horizontaliai nei vertikaliai. Dėl tos pačios priežasties, 100vmax bus lygus 100vh.

Panašiai a atveju kraštovaizdžio orientacija, 100vmin yra lygus 100vh, kaip peržiūros sritis vertikaliai mažesnis nei horizontaliai. Ir žinoma, 100vmax bus lygus 100vw čia.

Pavyzdys: Padarykite herojų tekstus skaitytus kiekviename ekrane

The vmin ir vmax vienetai yra daug mažiau žinomi nei vw ir vh. Tačiau jie gali būti puikiai naudojami kaip a pakeisti orientaciją @media užklausas. Pavyzdžiui, vmin ir vmax gali būti naudinga, kai turite elementų, kurie gali atrodyti keistai skirtingais aspektais.

Naujajame kodekse yra puiki pamoka, kurioje jie aptaria, kaip galite laikyti herojaus tekstą įskaitomą kiekviename ekrane, naudodami vmin vienetas. Hero tekstai gali atrodyti per mažas mobiliesiems ir per didelis dideliuose monitoriuose.

Čia yra pagrindinė jų sprendimo idėja:

 h1 šrifto dydis: 20vmin; šrifto šeima: Avenir, sans-serif; šrifto svoris: 900; teksto derinimas: centras;  

„Codepen“ demonstracijoje galite sužinoti, kaip vmin sprendžia herojaus tekstų skaitymo problemą. Prisijunkite prie “Visas puslapis” tada žiūrėkite Codepen keisti naršyklės langą horizontaliai ir vertikaliai, kad pamatytumėte, kaip keičiasi herojaus tekstas.

Naršyklės palaikymas

Kaip matote toliau pateiktoje „CanIUse“ diagramoje, naršyklės palaikymas yra gana geras peržiūros lango vienetams. Tačiau atminkite, kad kai kurios IE ir Edge versijos nepalaiko vmax. Be to, „iOS 6“ ir „7“ problema yra susijusi su „ vh vienetas, kuris buvo nustatytas iOS 8.