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

Source: https://devdocs10.com/articles/css/css-viewport-units  
By Murat Bo · Published 2026-08-17 · DevDocs10 (https://devdocs10.com)

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.

> **Difficulty:** Beginner
>
> **You'll understand this better if you know:** basic CSS selectors, how length values like `px` and `%` work, and the difference between the viewport and an element's own size.

## 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

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.

```css
.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.

```css
.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.

```css
.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.

```css
.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.

```css
.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.

```css
.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.

```css
.fullscreen {
  height: 100vh;
}
```

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

```css
.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.

```css
h1 {
  font-size: 8vw;
}
```

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

```css
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.

```css
.card {
  width: 40vmin;
}
```

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

```css
.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.

```css
.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.

```css
.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.

```css
.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()`.

```css
.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:**

```css
.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.

## Browser Support

| Feature | Status | Chrome | Edge | Firefox | Safari | Safari iOS |
| --- | --- | --- | --- | --- | --- | --- |
| Viewport units | Widely available since Apr 2020 | 26+ | 16+ | 19+ | 7+ | 7+ |
| Small, large, and dynamic viewport units | Widely available since Jun 2025 | 108+ | 108+ | 101+ | 15.4+ | 15.4+ |

Data: web-features 3.43.0 (MDN Baseline).