Guide til CSS Viewport Units vw, vh, vmin, vmax

Viewport-prosent lengder, eller viewport-enheter som de blir hyppigere referert til, er responsive CSS-enheter som lar deg definere dimensjoner som en prosentandel av bredden eller lengden på visningsporten. Viewport-enheter kan være ganske nyttige i tilfeller der andre responsive CSS-enheter, for eksempel prosenter, er vanskelig å gjøre arbeid.

Selv om W3Cs dokumentasjon på viewport-enheter inneholder alt som kan settes inn i teorien, det er ikke veldig verbose. Så, i denne artikkelen, ser vi på hvordan disse CSS-enhetene arbeid i praksis.

Utsiktshøyde (vh) og visningsbredde (vw)

W3C definerer visningsport som “størrelsen på den innledende inneholdende blokk”. Visningsområdet er med andre ord området inneholdt i nettleservinduet eller et annet visningsområde på en skjerm.

De vw og vh enheter stå for prosentandelen av bredden og høyden til den faktiske visningsporten. De kan ta en verdi mellom 0 og 100 i henhold til følgende regler:

 100vw = 100% av visningsbredde 1vw = 1% av visningsbredde 100vh = 100% av visningshøyde 1vh = 1% av visningshøyde 

Forskjeller til prosentandel enheter

Så hvordan er visningsenheter forskjellig fra prosentandel enheter? Prosentandel enheter arve størrelsen på deres foreldreelement mens viewport-enheter ikke gjør det. Viewport-enheter beregnes alltid som prosentandel av visningsstørrelsen. Som et resultat kan et element som er definert av viewport-enheter, overstige størrelsen på dets overordnede.

Eksempel: Fullskjermseksjoner

Fullskjermseksjoner er sannsynligvis de mest brukte brukstilfeller av viewport-enheter.

De HTML er ganske enkelt; vi har bare tre seksjoner under hverandre og vi vil at hver av dem skal dekke hele skjermen (men ikke mer).

I CSS bruker vi 100vh som en høyde verdi og 100% som bredde. Vi bruker ikke vw enhet her som standard, rullestenger er også lagt til til visningsstørrelsen. Så, hvis vi brukte bredde: 100vw; regel a horisontal rullefelt vil dukke opp på nederst i nettleservinduet.

 * margin: 0; polstring: 0;  seksjon bakgrunnsstørrelse: deksel; bakgrunnsposisjon: senter; bredde: 100%; høyde: 100vh;  .section-1 bakgrunnsbilde: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .section-2 bakgrunnsbilde: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .section-3 bakgrunnsbilde: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

På gif demoen under, kan du se det vh er virkelig en responsiv enhet.

I følge W3C-dokumentene er det nevnte horisontal rullestangsproblem kan løses ved å legge til overløp: auto; regelen til rotelementet. Denne løsningen fungerer bare delvis, selv om. Den horisontale rullefeltet forsvinner faktisk, men bredde er Beregnes fortsatt basert på visningsbredden (sidefeltet er inkludert), så elementene vil være litt større enn de burde være.

Jeg vil si, jeg ville ikke våge å bruke vw enhet på dimensjonering av fullskjermelementer på grunn av denne grunnen. Vi trenger ikke engang det, som bredde: 100%; regelen virker perfekt. Med fullskjermoppsett har den virkelige utfordringen alltid vært hvordan Sett en riktig høydeverdi og vh enheten gir en glimrende løsning for det.

Andre brukstilfeller

Hvis du er interessert i andre brukstilfeller vw og vh Lullabot har en flott artikkel som viser a håndfull eksempler på ektefelle (med Codepen demoer), for eksempel:

• Faste forholdskort.
• Holde et element kortere enn skjermen.
• Skaleringstekst.
• Bryter ut av beholderen.

Opera.dev har også en kort opplæring om hvordan du kan utnytte den vw enhet i skaper responsiv typografi.

Du kan ikke bare bruke viewport-enheter på bredde og høyde egenskaper, men på noen annen. For eksempel kan du sett størrelsen på paddings og margins bruker vw og vh enheter også.

Viewport min (Vmin) og viewport max (vmax)

De Vmin og vmax enheter lar deg få tilgang til Størrelsen på den mindre eller den større siden av visningsporten, i henhold til følgende regler:

 100vmin = 100vw eller 100vh, avhengig av hvilken som er mindre 1vmin = 1vw eller 1vh, avhengig av hvilken som er mindre 100vmax = 100vw eller 100vh, avhengig av hvilken som er større 1vmax = 1vw eller 1vh, avhengig av hvilket som er større 

Så, i tilfelle a portrett orientering, 100vmin er lik 100vw, som visningsporten er mindre horisontalt enn vertikalt. Av samme grunn, 100vmax vil være lik 100vh.

På samme måte, i tilfelle av a landskapsretning, 100vmin er lik 100vh, som visningsporten er mindre vertikalt enn horisontalt. Og selvfølgelig, 100vmax vil være lik 100vw her.

Eksempel: Gjør helte tekster lesbare på hver skjerm

De Vmin og vmax enheter er mye mindre allment kjent enn vw og vh. De kan imidlertid være utmerket brukt som en erstatning for orientering @media spørsmål. For eksempel, Vmin og vmax kan komme til nytte når du har elementer som kan se rart ut ved forskjellige forholdsforhold.

Den nye koden har en flott opplæring hvor de diskuterer hvordan du kan hold helten tekstlesbar på hver skjerm, ved hjelp av Vmin enhet. Heltekster er tilbøyelige til å se for liten på mobil og for stor på store skjermer.

Her er hovedideen til løsningen:

 h1 skriftstørrelse: 20vmin; font-familie: Avenir, sans-serif; font-weight: 900; tekstjustering: center;  

I Codepen demo kan du sjekke ut hvordan Vmin løser lesbarhetsproblemet med helttekster. Tilgang til “Helside” se på Codepen, da endre størrelsen på nettleservinduet både horisontalt og vertikalt for å se hvordan heltens tekst endres.

Nettleserstøtte

Som du kan se på CanIUse-diagrammet nedenfor, nettleserstøtte er relativt bra for visningsenheter. Vær imidlertid oppmerksom på at noen versjoner av IE og Edge ikke støtter vmax. IOS 6 og 7 har også et problem med vh enhet, som ble løst i iOS 8.