CSS Viewport Units (vh, vw, vmin, vmax, svh, lvh, dvh)

CSS viewport units let you size elements relative to the browser window instead of using fixed pixels. They are useful for full-screen layouts, responsive spacing, and elements that should scale with the visible page area.

Quick answer: Use vh and vw for classic viewport-relative sizing, vmin and vmax for the smaller or larger viewport side, and svh, lvh, and dvh for more reliable mobile viewport behavior.

1. What Is CSS Viewport Units (vh, vw, vmin, vmax, svh, lvh, dvh)?

Viewport units are CSS length values based on the size of the browser viewport. The viewport is the visible area of the page in the browser window, so these units change when the viewport changes size.

• vh = 1% of the viewport height
• vw = 1% of the viewport width
• vmin = 1% of the smaller viewport dimension
• vmax = 1% of the larger viewport dimension
• svh = 1% of the small viewport height
• lvh = 1% of the large viewport height
• dvh = 1% of the dynamic viewport height

These units are especially helpful when an element should adapt to the screen, such as a hero section, a full-height modal, or spacing that scales with the window.

2. Why CSS Viewport Units Matter

Viewport units solve a common problem: you often want an element to size itself based on the available screen area rather than on the content inside it. That makes them useful for layouts that need to feel proportional across phones, tablets, laptops, and large monitors.

They matter most when you need:

• full-screen sections that fill the browser window
• responsive typography or spacing tied to screen size
• square or proportional layouts that adapt to the smaller or larger axis
• mobile-friendly sizing that reacts better to browser UI changes

They are not always the best choice for text blocks, navigation, or content that should grow naturally with its contents. In those cases, intrinsic sizing, percentages, or flexible layout systems are often better.

3. Basic Syntax or Core Idea

Viewport units are used anywhere a CSS length is accepted. The number before the unit is multiplied by a percentage of the viewport measurement.

Simple syntax example

This example makes a section at least as tall as the viewport and uses viewport width for spacing.

.hero {
  min-height: 100vh;
  padding: 5vw;
}

100vh means the element is as tall as the viewport. 5vw means the padding is 5% of the viewport width.

How the units map to the screen

Think of the viewport as a rectangle. The width is measured with vw, the height is measured with vh, and the smaller or larger side can be targeted with vmin or vmax.

For example, if the viewport is 1200px wide and 800px tall:

• 1vw = 12px
• 1vh = 8px
• 1vmin = 8px
• 1vmax = 12px

4. Step-by-Step Examples

Example 1: Full-screen hero section

A classic use for viewport units is a section that fills the screen on first load.

.hero {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

This works well for landing pages because the content starts with a dramatic full-screen block. The section grows if the content becomes taller than the viewport, thanks to min-height.

Example 2: Responsive spacing with vw

You can use viewport width for margins and padding that scale with the screen.

.page {
  padding-inline: 4vw;
}

This keeps the horizontal breathing room proportional. On a larger screen, the spacing grows; on a smaller screen, it shrinks.

Example 3: Make a square using vmin

vmin is useful when the smaller viewport edge should control the size. This is common for squares or circular elements that need to stay inside the screen.

.badge {
  width: 20vmin;
  height: 20vmin;
  border-radius: 50%;
}

If the viewport changes orientation, the badge still follows the smaller side, which helps it avoid becoming too large.

Example 4: Choose the larger dimension with vmax

vmax tracks the larger viewport dimension. This is less common, but it can be useful for decorative elements that should stay visually bold.

.decor {
  width: 15vmax;
}

Because it follows the larger axis, the element can become quite large on wide screens. That is useful in design-heavy layouts, but it can be too aggressive for content containers.

Example 5: Use dvh for mobile viewport height

Mobile browsers often show and hide address bars, which changes the visible height. dvh adjusts dynamically to the real visible viewport.

.panel {
  min-height: 100dvh;
}

This is often the best choice for mobile layouts that need to fill the visible screen without being cut off behind browser controls.

5. Practical Use Cases

• Landing page hero sections that should fill the initial screen
• Full-height side panels or mobile drawers that match the viewport
• Responsive typography spacing that scales with the browser window
• Artwork, illustration frames, and decorative circles that follow screen proportions
• Modal overlays that should remain large enough to feel like a top-level surface
• Mobile layouts that need to react to changing browser chrome with dvh

6. Common Mistakes

Mistake 1: Using height: 100vh on mobile and expecting perfect fit

Many beginners use 100vh for a full-screen section, then discover that part of the content is hidden behind the mobile browser interface.

Problem: On some mobile browsers, vh is based on the layout viewport, not the currently visible space, so the element can appear too tall.

.fullscreen {
  height: 100vh;
}

Fix: Prefer 100dvh when you want the height to follow the visible viewport.

.fullscreen {
  height: 100dvh;
}

The corrected version better matches the screen that the user can actually see.

Mistake 2: Using viewport width for readable text sizes without limits

Viewport units can make text look impressive, but they can also become too small on phones or too large on wide monitors.

Problem: A font size based only on vw can create unreadable text at the extremes.

h1 {
  font-size: 8vw;
}

Fix: Combine viewport units with clamp() to keep text within sensible limits.

h1 {
  font-size: clamp(2rem, 8vw, 6rem);
}

This keeps the text responsive while preventing extreme values.

Mistake 3: Using vmin when you really want width-based sizing

vmin uses the smaller side of the viewport, which is not the same as width. That can be surprising on tall screens.

Problem: If the viewport is portrait-shaped, vmin may be based on height instead of width, changing the element size more than expected.

.card {
  width: 40vmin;
}

Fix: Use vw when the width should follow the viewport width directly.

.card {
  width: 40vw;
}

The corrected version tracks the horizontal dimension instead of the smaller viewport edge.

7. Best Practices

Use viewport units for layout, not for everything

Viewport units are strongest for large structural sizes like section height, artwork size, and proportional spacing. For body text and content containers, relative units like rem, em, and percentages are often easier to control.

.content {
  max-width: 65rem;
  padding: 2rem;
}

This keeps reading comfortable while still allowing other viewport-based elements around it.

Prefer dvh for mobile full-height sections

When the visible height changes as browser controls appear and disappear, dvh usually gives the most accurate result.

.app-shell {
  min-height: 100dvh;
}

This makes mobile layouts feel less broken when the browser UI changes size.

Combine viewport units with limits

Using min(), max(), or clamp() helps prevent extreme values on unusual screens.

.hero-title {
  font-size: clamp(2rem, 6vw, 5rem);
}

The result adapts to the viewport but remains within readable bounds.

8. Limitations and Edge Cases

• vh has a long history of mobile browser quirks because browser chrome can change the visible height.
• svh, lvh, and dvh are newer and may not behave the same way in older browsers.
• Viewport units are relative to the viewport, not the parent element, so they do not respond to container size changes.
• On very wide monitors, vw can create huge spacing or text if it is used without limits.
• On very small screens, values like 100vw can interact badly with scrollbars or overflow if the layout is not planned carefully.

One practical surprise is that 100vw can sometimes include the width of the scrollbar, which may lead to horizontal scrolling in some layouts. If that happens, inspect the element widths and consider whether percentages or max-width would be safer.

9. Practical Mini Project

Here is a small responsive hero panel that uses multiple viewport units together. It fills the screen, keeps its typography proportional, and avoids extreme sizes with clamp().

.hero {
  min-height: 100dvh;
  padding: 6vw;
  display: grid;
  align-items: center;
  background: #111827;
  color: #ffffff;
}

.hero h1 {
  font-size: clamp(2.5rem, 7vw, 6rem);
  line-height: 1.05;
  max-width: 12ch;
}

.hero p {
  font-size: 1.1rem;
  max-width: 40rem;
}

This pattern works well because it uses dvh for height, vw for responsive spacing, and clamp() to keep the heading readable. It gives you a practical starting point for full-screen sections without the common mobile height problem.

10. Key Points

• vh and vw are based on viewport height and width.
• vmin uses the smaller viewport side, and vmax uses the larger side.
• svh, lvh, and dvh are the modern viewport height variants.
• dvh is often the best choice for mobile full-height layouts.
• Viewport units are powerful, but they should often be combined with limits like clamp() or max-width.
• Text and content containers usually need more control than raw viewport units alone.

11. Practice Exercise

• Create a banner that fills the visible height of the browser.
• Make the banner heading scale with the viewport, but keep it between 2rem and 5rem.
• Add padding that grows slightly on wider screens.

Expected output: A banner that feels responsive on both mobile and desktop, with a large heading that never becomes too small or too large.

Hint: Use 100dvh for height, clamp() for the heading, and vw for spacing.

Solution:

.banner {
  min-height: 100dvh;
  padding: 4vw;
  display: grid;
  place-items: center;
}

.banner h2 {
  font-size: clamp(2rem, 6vw, 5rem);
  line-height: 1.1;
}

This solution works because it combines viewport-relative sizing with practical limits and mobile-friendly height behavior.

12. Final Summary

CSS viewport units make it easy to size elements relative to the browser window. The classic units, vh, vw, vmin, and vmax, are useful for responsive layouts and proportional design. The newer height units, svh, lvh, and dvh, exist to handle mobile viewport changes more reliably.

For most modern responsive layouts, start with the unit that matches your goal exactly, then add safeguards like clamp() or max-width when needed. If you are building a full-height mobile section, dvh is often the best place to begin.

Next, try comparing vh and dvh in a simple hero section on a mobile device so you can see the difference in real browser behavior.