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

Viewport-procentlængder, eller viewport enheder som de hyppigere henvises til, er responsive CSS-enheder, der giver dig mulighed for at definere dimensioner som en procentdel af bredden eller længden af visningsporten. Viewport-enheder kan være ganske nyttige i tilfælde, hvor andre responsive CSS-enheder, såsom procentsatser, er svært at lave arbejde.

Selvom W3C's dokumentation på viewport enheder indeholder alt, hvad der kan sættes i teori, det er ikke meget verbose. Så i denne artikel får vi et kig på, hvordan disse CSS-enheder arbejde i praksis.

Viewport højde (`vh`) og visningsbredde (`vw`)

W3C definerer viewport som “størrelsen af den indledende indeholdende blok”. Med andre ord er viewport området indeholdt i browservinduet eller et andet visningsområde på en skærm.

Det vw og vh enheder står for procentdelen af bredden og højden af den faktiske viewport. De kan tage en værdi mellem 0 og 100 i henhold til følgende regler:

 100vw = 100% af visningsbredde 1vw = 1% af visningsbredde 100vh = 100% af visningshøjde 1vh = 1% af udsynshøjde

Forskelle til procentdel enheder

Så hvordan er viewport-enheder forskellige fra procentvise enheder? Procentdel enheder arve størrelsen af deres overordnede element mens viewport-enheder ikke gør det. Viewport-enheder beregnes altid som procentdel af visningsstørrelsen. Som et resultat kan et element, der er defineret af viewport-enheder, overstige størrelsen af dets overordnede.

Eksempel: Fuldskærms sektioner

Fuldskærms sektioner er nok de mest kendte brugen tilfælde af viewport enheder.

Det HTML er ret simpelt; vi har bare tre sektioner under hinanden og vi vil have dem alle til dække hele skærmen (men ikke mere).

I CSS bruger vi 100vh som en højde værdi og 100% som bredde. Vi bruger ikke vw enhed her som standard, scrollbars er også tilføjet til viewportstørrelsen. Så hvis vi brugte bredde: 100vw; regel a vandret rullepanel ville ses på nederst i browservinduet.

 * margin: 0; polstring: 0;  afsnit baggrundsstørrelse: dækning; baggrundsstilling: center; bredde: 100%; højde: 100vh;  .sektion-1 baggrundsbillede: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .sektion-2 baggrundsbillede: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img2.jpg');  .sektion-3 baggrundsbillede: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');

På gif demoen nedenfor kan du se det vh er virkelig en lydhør enhed.

Ifølge W3C-dokumenterne er ovennævnte vandret rullebjælke problem kan løses ved at tilføje overløb: auto; regere til rodelementet. Denne løsning fungerer kun delvist, selvom. Den vandrette rullebjælke forsvinder faktisk, men bredde er beregnes stadig baseret på visningsbredden (sidebjælken inkluderet), så elementerne vil være lidt større, end de burde være.

Jeg vil sige, jeg ville ikke tør bruge vw enhed på dimensionering af fuldskærmselementer på grund af denne grund. Vi behøver det ikke engang, som den bredde: 100%; regel fungerer perfekt. Med fuldskærm layouter har den rigtige udfordring altid været hvordan Indstil en passende højdeværdi og vh Enheden giver en strålende løsning til det.

Andre anvendelsessager

Hvis du er interesseret i andre anvendelsessager vw og vh Lullabot har en god artikel, der lister a håndfuld egentlige eksempler (med Codepen demoer), såsom:

Fast-forhold kort.
Holder et element kortere end skærmen.
Skalering af tekst.
Bryder ud af beholderen.

Opera.dev har også en kort vejledning om hvordan du kan udnytte den vw enhed i skabe responsiv typografi.

Du kan ikke kun bruge viewport-enheder på bredde og højde egenskaber men på enhver anden. For eksempel kan du Indstil størrelsen af paddings og margener bruger vw og vh enheder også.

Viewport min (`Vmin`) & viewport max (`vmax`)

Det Vmin og vmax enheder giver dig mulighed for at få adgang til Størrelsen af den mindre eller den større side af visningsporten i henhold til følgende regler:

 100vmin = 100vw eller 100vh, afhængigt af hvilket der er mindre 1vmin = 1vw eller 1vh, alt efter hvad der er mindre 100vmax = 100vw eller 100vh, afhængigt af hvilket der er større 1vmax = 1vw eller 1vh, alt efter hvad der er større

Så i tilfælde af a portræt orientering, 100vmin er lig med 100vw, som viewport er mindre vandret end lodret. Af samme grund, 100vmax vil være lig med 100vh.

Tilsvarende, i tilfælde af a landskabsorientering, 100vmin er lig med 100vh, som viewport er mindre lodret end vandret. Og selvfølgelig, 100vmax vil være lig med 100vw her.

Eksempel: Lav helte tekster læsbare på hver skærm

Det Vmin og vmax enheder er meget mindre almindeligt kendt end vw og vh. De kan dog udmærket bruges som en erstatning for orientering @medier forespørgsler. For eksempel, Vmin og vmax kan komme i brug, når du har elementer, der kan se mærkeligt ud ved forskellige aspektforhold.

Den nye kode har en god tutorial, hvor de diskuterer hvordan du kan holde helten tekst læselig på hver skærm, ved hjælp af Vmin enhed. Heltekster er tilbøjelige til at se ud for lille på mobil og for stor på store skærme.

Her er hovedidéen for deres løsning:

 h1 skriftstørrelse: 20vmin; font-familie: Avenir, sans-serif; skrifttype-vægt: 900; tekst-align: center;

I Codepen demo kan du tjekke hvordan Vmin løser læsbarhedsproblemet med helttekster. Få adgang til “Fuld side” se på Codepen, da ændre størrelsen på dit browservindue både vandret og lodret for at se, hvordan heltens tekst ændres.

Se Pen vMin for Hero Text af Dudley Storey (@dudleystorey) på CodePen.

Browser support

Som du kan se på CanIUse-diagrammet nedenfor, browser support er forholdsvis god for viewport enheder. Husk dog, at nogle versioner af IE og Edge ikke understøtter vmax. Også iOS 6 og 7 har et problem med vh enhed, som blev rettet i iOS 8.