Gids voor CSS Viewport Units vw, vh, vmin, vmax

Viewport-percentage lengtes, of kijkvenstereenheden zoals ze vaker worden genoemd, zijn responsieve CSS-eenheden waarmee u dimensies kunt definiëren als een percentage van de breedte of de lengte van de viewport. Viewport-eenheden kunnen erg handig zijn in gevallen waarin andere responsieve CSS-eenheden, zoals percentages, dat wel zijn moeilijk om werk te maken.

Hoewel W3C's documentatie op viewport-eenheden bevat alles dat in de theorie kan worden gestopt, het is niet erg breedsprakig. Dus, in dit artikel zullen we kijken hoe deze CSS-eenheden werk in de praktijk.

Hoogte van de kijker (vh) & viewport width (vw)

W3C definieert viewport zoals “grootte van het oorspronkelijke bevattende blok”. Met andere woorden, viewport is het gebied opgenomen in het browservenster of een ander weergavegebied op een scherm.

De vw en vh units staan ​​voor het percentage van de breedte en hoogte van de daadwerkelijke viewport. Ze kunnen een waarde aannemen tussen 0 en 100 volgens de volgende regels:

 100vw = 100% van de viewportbreedte 1vw = 1% van de viewportbreedte 100vh = 100% van de viewporthoogte 1vh = 1% van de viewport height 

Verschillen met percentage eenheden

Hoe verschillen de viewport-eenheden van het percentage eenheden? Percentage eenheden erven de grootte van hun bovenliggende element terwijl viewport-eenheden dat niet doen. Viewport-eenheden worden altijd berekend als de percentage van de viewport-grootte. Als gevolg hiervan kan een element dat is gedefinieerd door viewport-eenheden de grootte van het bovenliggende element overschrijden.

Voorbeeld: gedeelten op volledig scherm

Secties op volledig scherm zijn waarschijnlijk de meest bekende gebruikscasussen van viewport-eenheden.

De HTML is vrij eenvoudig; we hebben gewoon drie secties onder elkaar en we willen dat elk van hen dat doet bedek het hele scherm (maar niet meer).

In de CSS gebruiken we 100vh als een hoogte waarde en 100% zoals breedte. We gebruiken de vw eenheid hier als standaard, schuifbalken zijn ook toegevoegd naar de viewport-grootte. Dus als we de breedte: 100vw; regel a horizontale schuifbalk zou verschijnen op de onderaan het browservenster.

 * marge: 0; opvulling: 0;  sectie background-size: cover; achtergrond-positie: midden; breedte: 100%; hoogte: 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');  .sectie-3 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img3.jpg');  

Op de GIF-demo hieronder kun je dat zien vh is echt een responsieve eenheid.

Volgens de W3C-documenten, de bovengenoemde probleem met horizontale schuifbalk kan worden opgelost door de overloop: auto; regel naar het rootelement. Deze oplossing werkt slechts gedeeltelijk, though. De horizontale schuifbalk verdwijnt inderdaad maar breedte is nog steeds berekend op basis van de breedte van de viewport (inclusief de zijbalk), dus de elementen zijn iets groter dan ze zouden moeten zijn.

Ik zou zeggen, ik zou het niet durven gebruiken vw eenheid aan dimensionering van elementen op volledig scherm om deze reden. We hebben het zelfs niet nodig, zoals de breedte: 100%; regel werkt perfect. Met de lay-outs op volledig scherm is de echte uitdaging altijd geweest hoe stel de juiste hoogtewaarde in en de vh unit geeft daar een briljante oplossing voor.

Andere use-cases

Als je geïnteresseerd bent in andere use-cases vw en vh Lullabot heeft een geweldig artikel met een lijst van een handvol voorbeelden uit de praktijk (met Codepen-demo's), zoals:

• Kaarten met vaste ratio.
• Een element korter houden dan het scherm.
• Tekst schalen.
• Uit de container breken.

Opera.dev heeft ook een korte zelfstudie over hoe u gebruik kunt maken van de vw eenheid in het creëren van responsieve typografie.

U kunt niet alleen viewport-eenheden gebruiken op de breedte en hoogte eigenschappen maar op elke andere. U kunt bijvoorbeeld de grootte van opvullingen en marges instellen de ... gebruiken vw en vh eenheden ook.

Min. Weergaven (Vmin) & viewport max (vmax)

De Vmin en vmax eenheden geven u toegang tot de grootte van de kleinere of de grotere kant van de viewport, volgens de volgende regels:

 100vmin = 100vw of 100vh, afhankelijk van welke kleiner is 1vmin = 1vw of 1vh, welke van beide kleiner is 100vmax = 100vw of 100vh, welke groter is 1vmax = 1vw of 1vh, welke groter is 

Dus in het geval van een portret oriëntatie, 100vmin is gelijk aan 100vw, zoals het kijkvenster is kleiner horizontaal dan verticaal. Om dezelfde reden, 100vmax zal gelijk zijn aan 100vh.

Evenzo, in het geval van een landschap oriëntatie, 100vmin is gelijk aan 100vh, zoals het kijkvenster is verticaal kleiner dan horizontaal. En uiteraard, 100vmax zal gelijk zijn aan 100vw hier.

Voorbeeld: maak hero-teksten leesbaar op elk scherm

De Vmin en vmax eenheden zijn veel minder algemeen bekend dan vw en vh. Ze kunnen echter uitstekend worden gebruikt als een vervanging voor oriëntatie @media queries. Bijvoorbeeld, Vmin en vmax kan handig zijn als je elementen hebt die er vreemd uitzien bij verschillende beeldverhoudingen.

De nieuwe code heeft een geweldige tutorial waarin ze bespreken hoe je kunt houd helden tekst leesbaar op elk scherm, met behulp van de Vmin eenheid. Heldeksten zijn geneigd om te kijken te klein op mobiel en te groot op grote monitoren.

Hier is het belangrijkste idee van hun oplossing:

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

In de demo van Codepen kun je kijken hoe Vmin lost het leesbaarheidsprobleem van heldenteksten op. Toegang krijgen tot “Volledige pagina” zicht op Codepen formaat van uw browservenster wijzigen zowel horizontaal als verticaal om te zien hoe de tekst van de held verandert.

Browserondersteuning

Zoals u kunt zien in de CanIUse-grafiek hieronder, browserondersteuning is relatief goed voor viewport-eenheden. Houd er echter rekening mee dat sommige versies van IE en Edge geen ondersteuning bieden vmax. Ook hebben iOS 6 en 7 een probleem met de vh eenheid, die is opgelost in iOS 8.