Opas CSS Viewport -yksiköihin vw, vh, vmin, vmax

Viewport-prosenttipituudet, tai viewport-yksiköt kuten ne ovat yleisempiä, ovat reagoivia CSS-yksiköitä, joiden avulla voit määrittää mittoja prosenttiosuutena näkymäportin leveydestä tai pituudesta. Viewport-yksiköt voivat olla varsin hyödyllisiä tapauksissa, joissa muut reagoivat CSS-yksiköt, kuten prosenttiosuudet, ovat vaikea tehdä työtä.

Siitä huolimatta W3C: n dokumentaatio viewport-yksiköissä on kaikkea, mitä voidaan teoriassa käyttää, se ei ole kovin verbose. Joten tässä artikkelissa tarkastellaan, miten nämä CSS-yksiköt toimivat käytännössä.

Viewportin korkeus (vh) & viewport-leveys (VW)

W3C määrittelee näkymäportin kuten “alkuperäisen sisältävän lohkon koko”. Toisin sanoen, viewport on alue sisältyvät selainikkunaan tai jokin muu näyttöalueen katselualue.

VW ja vh yksiköt seisoo todellisen katseluportin leveyden ja korkeuden prosenttiosuus. Ne voivat ottaa arvoa välillä 0 - 100 seuraavien sääntöjen mukaisesti:

 100vw = 100% katselualueen leveydestä 1vw = 1% katseluportin leveydestä 100vh = 100% näkymänportin korkeudesta 1vh = 1% näkymänportin korkeudesta 

Erot prosenttiyksiköihin

Miten katseluportin yksiköt eroavat prosenttiyksiköistä? Prosenttiyksiköt periä vanhemman elementin koko katseluportin yksiköt eivät. Viewport-yksiköt lasketaan aina prosenttiosuus katseluportin koosta. Tämän seurauksena viewport-yksiköiden määrittämä elementti voi ylittää sen vanhemman koon.

Esimerkki: Koko näytön osat

Koko näytön osat ovat luultavasti yleisimmin tunnettuja viewport-yksiköiden käyttötapoja.

HTML on melko yksinkertainen; meillä on vain kolme osaa toisistaan ja haluamme, että jokainen niistä peittää koko näytön (mutta ei enempää).

Käytämme CSS: ssä 100vh kuten a korkeus arvo ja 100% kuten leveys. Emme käytä VW tässä oletusarvoisesti, lisätään myös vierityspalkit näkymän koko. Joten, jos käytimme leveys: 100vw; sääntö a vaakasuuntainen vierityspalkki näkyisi selainikkunan alareunassa.

 * marginaali: 0; pehmuste: 0;  osio taustakoko: kansi; tausta-asema: keskus; leveys: 100%; korkeus: 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');  

Alla olevasta gif-demosta näet sen vh on todella reagoiva yksikkö.

Edellä mainittujen W3C-asiakirjojen mukaan vaakasuuntainen vierityspalkin ongelma voidaan ratkaista lisäämällä ylivuoto: auto; sääntö juurielementtiin. Tämä ratkaisu toimii vain osittain, vaikka. Vaakasuuntainen vierityspalkki häviää, mutta leveys on lasketaan edelleen katseluportin leveyden perusteella (sivupalkki mukana), joten elementit ovat hieman suurempia kuin niiden pitäisi olla.

Sanoisin, etten uskalla käyttää sitä VW yksikön päälle koko näytön elementtien kokoaminen tästä syystä. Emme edes tarvitse sitä, kuten leveys: 100%; sääntö toimii täydellisesti. Koko näytön asetteluilla todellinen haaste on aina ollut miten aseta oikea korkeusarvo ja vh yksikkö antaa sille loistavan ratkaisun.

Muut käyttötapaukset

Jos olet kiinnostunut muut käyttötapaukset VW ja vh Lullabotilla on loistava artikkeli, jossa luetellaan a kourallinen todellisia esimerkkejä (Codepen-demojen kanssa), kuten:

• Kiinteän suhteen kortit.
• Pidä elementti lyhyempi kuin näyttö.
• Skaalauksen teksti.
• Säiliöstä irtoaminen.

Opera.devilla on myös lyhyt opetusohjelma siitä, miten voit hyödyntää VW yksikkö vuonna luodaan reagoiva typografia.

Et voi käyttää vain viewport-yksiköitä leveys ja korkeus ominaisuuksia, mutta millä tahansa muulla. Esimerkiksi voit määritä tarhojen ja reunojen koko käyttämällä VW ja vh myös yksiköitä.

Viewport min (Vmin) & viewport max (vmax)

Vmin ja vmax yksiköiden avulla voit käyttää pienemmän tai suuremman sivun koko näkymän portin seuraavien sääntöjen mukaisesti:

 100vmin = 100vw tai 100vh, kumpi on pienempi 1vmin = 1vw tai 1vh, kumpi on pienempi 100vmax = 100vw tai 100vh, kumpi on suurempi 1vmax = 1vw tai 1vh, kumpi on suurempi 

Joten jos kyseessä on a pystysuuntaan, 100vmin on yhtä suuri kuin 100vw, koska katseluportti on pienempi kuin pystysuunnassa. Samasta syystä, 100vmax on yhtä suuri kuin 100vh.

Samoin a maiseman suunta, 100vmin on yhtä suuri kuin 100vh, koska katseluportti on pienempi pystysuunnassa kuin vaakasuunnassa. Ja tietenkin, 100vmax on yhtä suuri kuin 100vw tässä.

Esimerkki: Tee hero-tekstit luettaviksi jokaisella näytöllä

Vmin ja vmax yksiköt ovat paljon vähemmän tunnettuja kuin VW ja vh. Niitä voidaan kuitenkin käyttää erinomaisesti a sijainen @media kyselyt. Esimerkiksi, Vmin ja vmax voi olla kätevä, kun sinulla on elementtejä, jotka saattavat näyttää outoilta eri kuvasuhteissa.

Uudessa koodissa on hyvä opetusohjelma, jossa he keskustelevat siitä, miten voit pidä sankarin tekstiä luettavissa jokaiseen näyttöön Vmin yksikkö. Hero-tekstit ovat altis näyttää liian pieni liikkuvilla ja liian suurilla näytöillä.

Tässä on niiden ratkaisun pääajatus:

 h1 font-size: 20vmin; font-perhe: Avenir, sans-serif; kirjasinpaino: 900; text-align: center;  

Codepen-demossa voit tarkistaa, miten Vmin ratkaisee sankaritekstien luettavuusongelman. Siirry “Täysi sivu” sitten Codepenissä kokoa selainikkunasi sekä vaakasuunnassa että pystysuunnassa, miten sankarin teksti muuttuu.

Selaimen tuki

Kuten näet alla olevassa CanIUse-taulukossa, selaimen tuki on suhteellisen hyvä viewport-yksiköille. Muista kuitenkin, että tietyt IE- ja Edge-versiot eivät tue vmax. Myös iOS 6: lla ja 7: llä on ongelma vh yksikkö, joka vahvistettiin iOS 8: ssa.