CSS Academy · Lektion

Viewport-enheter: vw, vh och dvh

Ändra storlek på element i förhållande till webbläsarens visningsområde med vw, vh och de moderna enheterna dvh.

Lektion 3 av 413 steg

Viewport-enheter: vw, vh och dvh är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad är viewport-enheter?

Viewport-enheter är relativa till storleken på webbläsarens viewport (det synliga området i webbläsarfönstret). De möjliggör layouter och typografi som skalas med det tillgängliga skärmutrymmet.

vw — Viewport-bredd

1vw = 1 % av viewportens bredd. 100vw fyller hela viewportens bredd. Det är användbart för element i full bredd utan komplikationer med procentbaserade mått.

<div class="hero"></div>

vh — Viewport-höjd

1vh = 1 % av viewportens höjd. 100vh fyller hela viewportens höjd. Det är klassiskt för helskärmssektioner av typen hero och modaler.

<div class="fullscreen">100vh fills the viewport height</div>

Problemet med 100vh på mobila enheter

I mobila webbläsare ändras viewportens höjd när webbläsarens gränssnitt (adressfältet) visas eller döljs under rullning. 100vh kan på ett inkonsekvent sätt inkludera eller exkludera webbläsarens gränssnitt, vilket kan göra att innehåll delvis döljs.

dvh — Dynamisk viewport-höjd

dvh (dynamisk viewport-höjd) uppdateras dynamiskt för att återspegla den faktiska synliga höjden efter att webbläsarens gränssnitt har justerats. Det löser problemet med 100vh på mobila enheter.

<div class="mobile-hero">Dynamic viewport height (100dvh)</div>

svh och lvh

CSS tillhandahåller även svh (liten viewport-höjd – webbläsarens gränssnitt utesluts alltid) och lvh (stor viewport-höjd – som om gränssnittet vore dolt). Dessa ger fin kontroll över viewportens beteende på mobila enheter.

Flexibel typografi med vw

Om du använder vw för teckenstorlek skapas text som skalas med skärmen:

<h1>Fluid Heading</h1>

Begränsningar för viewport-bredd

100vw inkluderar rullningslistens bredd på datorer. Det orsakar horisontell överströmning om det används oförsiktigt. Föredra width: 100% på blockelement och reservera vw för specifika fall.

vmin och vmax

1vmin = 1 % av den mindre viewport-dimensionen (bredd eller höjd). 1vmax = 1 % av den större. Det är användbart för kvadratiska behållare som anpassas när orienteringen ändras.

<div class="square"></div>

svw, lvw, dvw — Breddvarianter

Precis som för höjdvarianterna tillhandahåller CSS svw, lvw och dvw för bredd. De dynamiska varianterna (dvw, dvh) är mest användbara på mobila enheter.

Praktiska mönster

Vanliga mönster för viewport-enheter:

min-height: 100dvh — helskärmssektioner som är säkra på mobila enheter
height: 100svh — paneler med fast gränssnitt
font-size: clamp(1rem, 2.5vw, 2rem) — rubriker med flexibel storlek
width: min(800px, 90vw) — behållare med säker bredd

Snabb kontroll

Varför föredras dvh framför vh för helskärmssektioner på mobila enheter?

Besvara frågan i den interaktiva lektionen

Sammanfattning

vw och vh motsvarar 1 % av viewportens bredd respektive höjd. På mobila enheter är vh opålitligt på grund av webbläsarens gränssnitt. Använd dvh för dynamiska helskärmslayouter som stämmer med den mobila viewporten. vmin och vmax reagerar på viewportens mindre respektive större dimension.

Gratis att börja

Lär dig CSS med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 40
Lektioner: 159

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Viewport-enheter: vw, vh och dvh” gratis?

Ja – hela texten till ”Viewport-enheter: vw, vh och dvh” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Viewport-enheter: vw, vh och dvh”?

Ändra storlek på element i förhållande till webbläsarens visningsområde med vw, vh och de moderna enheterna dvh. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig CSS Academy?

Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.

Hur lång tid tar lektionen ”Viewport-enheter: vw, vh och dvh”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här CSS Academy-lektionen?

Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till CSS Academy