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

Viewport-procentlängder, eller viewportenheter som de oftare refereras till, är responsiva CSS-enheter som låter dig definiera dimensioner som en procentandel av visningsportens bredd eller längd. Viewport-enheter kan vara ganska användbara i fall där andra responsiva CSS-enheter, såsom procentandelar, är svårt att göra arbete.

Fastän W3C: s dokumentation På viewportenheter finns allt som kan sättas in i teorin, det är inte särskilt verbalt. Så, i den här artikeln tar vi en titt på hur dessa CSS-enheter arbeta i praktiken.

Utsiktshöjd (vh) och visningsbredd (vw)

W3C definierar visningsport som “storleken av det initiala innehållande blocket”. Med andra ord är viewport området innehållet i webbläsarfönstret eller något annat visningsområde på en skärm.

De vw och vh enheter stå för procentandelen av bredden och höjden på den aktuella visningsporten. De kan ta ett värde mellan 0 och 100 enligt följande regler:

 100vw = 100% visningsbredd 1vw = 1% visningsbredd 100vh = 100% visningshöjd 1vh = 1% visningshöjd 

Skillnader i procentenheter

Så hur skiljer sig visningsenheter från procentandelar? Procentandel enheter ärva storleken på deras moderelement medan viewportenheter inte gör det. Viewportenheter beräknas alltid som procent av visningsstorleken. Som ett resultat kan ett element som definieras av visningsenheter överstiga storleken på dess förälder.

Exempel: Helskärmsavsnitt

Helskärmsavsnitt är förmodligen de mest kända användningsfallen för visningsenheter.

De HTML är ganska enkelt; vi har bara tre sektioner under varandra och vi vill att var och en av dem ska täcka hela skärmen (men inte mer).

I CSS använder vi 100vh som en höjd värde och 100% som bredd. Vi använder inte vw enhet här som standard, rullningslister läggs också till till visningsstorleken. Så, om vi använde bredd: 100vw; regel a horisontell rullningslist skulle dyka upp på längst ned i webbläsarfönstret.

 * marginal: 0; vaddering: 0;  avsnitt bakgrundsstorlek: omslag; bakgrundsställning: center; bredd: 100%; höjd: 100vh;  .section-1 background-image: url ('https://assets.hongkiat.com/uploads/css-viewport-units-vw-vh-wmin-vmax/img1.jpg');  .sektion-2 bakgrundsbild: 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');  

På gif demoen nedan kan du se det vh är verkligen en lyhörd enhet.

Enligt W3C-dokumenten är det ovan nämnda horisontell rullningsproblem kan lösas genom att lägga till överflöde: auto; styra till rotelementet. Denna lösning fungerar bara delvis, fastän. Den horisontella rullningsstången försvinner faktiskt men bredd är Beräknas fortfarande baserat på visningsbredden (sidopan ingår), så elementen kommer att vara något större än de borde vara.

Jag skulle säga att jag inte skulle våga använda vw enhet på dimensionering av helskärmselement på grund av denna anledning. Vi behöver inte ens det, som bredd: 100%; regel fungerar perfekt. Med fullskärmslayout har den verkliga utmaningen alltid varit hur Ange ett korrekt höjdvärde och den vh enheten ger en lysande lösning för det.

Andra användningsfall

Om du är intresserad av andra användningsfall vw och vh Lullabot har en bra artikel som listar a handfull exempel på verkliga livet (med Codepen demos), till exempel:

• Fixed-ratio-kort.
• Håller ett element kortare än skärmen.
• Skalande text.
• Bryt ut ur behållaren.

Opera.dev har också en kort handledning om hur du kan dra nytta av vw enhet i skapa responsiv typografi.

Du kan inte bara använda visningsenheter på bredd och höjd egenskaper men på någon annan. Till exempel kan du Ange storleken på paddlar och marginaler använda vw och vh enheter också.

Viewport min (Vmin) & viewport max (vmax)

De Vmin och vmax enheter tillåter dig åtkomst till storleken på den mindre eller den större sidan av visningsporten enligt följande regler:

 100vmin = 100vw eller 100vh, beroende på vilken som är mindre 1vmin = 1vw eller 1vh, vilken som är mindre 100vmax = 100vw eller 100vh, vilken som är större 1vmax = 1vw eller 1vh, vilket som är större 

Så, om a stående format, 100vmin är lika med 100vw, som utsikten är mindre horisontellt än vertikalt. Av samma anledning, 100vmax kommer att vara lika med 100vh.

På liknande sätt, om a Landskapsorientering, 100vmin är lika med 100vh, som utsikten är mindre vertikalt än horisontellt. Och naturligtvis, 100vmax kommer att vara lika med 100vw här.

Exempel: Gör hjältexter läsbara på varje skärm

De Vmin och vmax enheter är mycket mindre allmänt kända än vw och vh. De kan dock vara utmärkt som en ersätta orientering @media sökfrågor. Till exempel, Vmin och vmax kan komma till nytta när du har element som kan se konstigt ut vid olika bildförhållanden.

Den nya koden har en bra handledning där de diskuterar hur du kan hålla hjälte text läsbar på varje skärm, med hjälp av Vmin enhet. Herotekster är benägna att se för liten på mobil och för stor på stora bildskärmar.

Här är huvudidén av deras lösning:

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

I Codepen demo kan du kolla hur Vmin löser läsbarhetsproblemet hos hjältexter. Gå till “Hel sida” se på Codepen då ändra storlek på ditt webbläsarfönster både horisontellt och vertikalt för att se hur hjälte texten ändras.

Webbläsarstöd

Som du kan se på CanIUse-diagrammet nedan, webbläsarsupport är relativt bra för visningsenheter. Tänk dock på att vissa versioner av IE och Edge inte stöder vmax. Dessutom har iOS 6 och 7 ett problem med vh enhet, som fixades i iOS 8.