CssConceptBeginner · 3 min read

What is vw in CSS: Understanding Viewport Width Units

vw in CSS stands for viewport width and is a unit that represents a percentage of the browser window's width. For example, 1vw equals 1% of the viewport's width, making it useful for responsive designs that adjust to different screen sizes.

⚙️

How It Works

Imagine the browser window as a box that can change size depending on the device or when you resize it. The vw unit measures lengths as a percentage of this box's width. So, if you set an element's width to 50vw, it will always be half the width of the browser window, no matter the screen size.

This makes vw very handy for creating layouts that adapt smoothly to different devices, like phones, tablets, or desktops. Instead of using fixed pixel sizes that might look too big or too small on some screens, vw scales with the viewport, keeping your design flexible and user-friendly.

💻

Example

This example shows a box that is always 30% of the viewport width, so it changes size as you resize the browser window.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VW Unit Example</title>
  <style>
    .box {
      width: 30vw;
      height: 100px;
      background-color: #4CAF50;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2rem;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="box">30vw wide</div>
</body>
</html>

Output

A green rectangular box with white text '30vw wide' that changes width as the browser window width changes.

🎯

When to Use

Use vw when you want elements to scale based on the width of the browser window. This is great for responsive typography, flexible layouts, and full-width sections that adjust smoothly on different devices.

For example, you can use vw to make text size grow or shrink with the screen, or to set widths of images and containers so they never overflow or look too small. It helps create designs that feel natural on phones, tablets, and desktops without writing complex media queries.

✅

Key Points

vw means 1% of the viewport's width.
It helps create responsive designs that adapt to screen size.
Works well for widths, font sizes, and spacing that should scale.
Combines nicely with other CSS units for flexible layouts.
Remember it depends on the browser window size, not the content size.

✅

Key Takeaways

vw is a CSS unit equal to 1% of the viewport width.

It allows elements to resize dynamically with the browser window.

Use vw for responsive widths, font sizes, and layouts.

It helps avoid fixed sizes that don't work well on all devices.

Combine vw with other units for best flexible design.