CssConceptBeginner · 3 min read

What is vw and vh in CSS: Explained with Examples

vw and vh are CSS units that stand for viewport width and viewport height, respectively. They represent a percentage of the browser window's width or height, making it easy to create responsive designs that adjust to different screen sizes.

⚙️

How It Works

Imagine your browser window as a frame through which you see a webpage. The vw unit measures 1% of the width of this frame, while vh measures 1% of its height. So, if your browser window is 1000 pixels wide, 1vw equals 10 pixels.

This means if you set an element's width to 50vw, it will always be half the width of the browser window, no matter the device or screen size. Similarly, setting height to 100vh makes the element as tall as the entire visible window.

Using these units helps your webpage adapt smoothly when someone resizes their browser or views your site on different devices, like phones or tablets.

💻

Example

This example shows a box that takes up half the browser's width and a quarter of its height using vw and vh.

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VW and VH Example</title>
<style>
html {
  height: 100%;
  margin: 0;
}
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}
.box {
  width: 50vw;
  height: 25vh;
  background-color: #4a90e2;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
</style>
</head>
<body>
  <div class="box">50vw × 25vh</div>
</body>
</html>

Output

A blue rectangular box centered on the page that is half the browser's width and one quarter of its height, with white text '50vw × 25vh' inside.

🎯

When to Use

Use vw and vh when you want elements to size relative to the visible browser window. This is great for full-screen sections, hero images, or layouts that must adapt fluidly to different screen sizes.

For example, a header that always fills the full width of the screen can use width: 100vw;. A splash page or modal might use height: 100vh; to cover the entire viewport height.

These units help avoid fixed pixel sizes that can look too big or small on different devices, improving the user experience on phones, tablets, and desktops.

✅

Key Points

vw means 1% of the viewport's width.
vh means 1% of the viewport's height.
They help create responsive designs that adjust to screen size changes.
Useful for full-width or full-height sections and flexible layouts.
Remember that viewport units change when the browser window resizes.

✅

Key Takeaways

vw and vh are viewport-based units that scale with the browser window size.

Use them to make elements responsive to different screen sizes without fixed pixels.

1vw equals 1% of the viewport width; 1vh equals 1% of the viewport height.

They are perfect for full-screen layouts, hero sections, and flexible designs.

Viewport units update automatically when the browser window is resized.