🖥️ Viewport Units in CSS — vw, vh, vmin, vmax Explained

🌐 What Are Viewport Units?

Viewport units allow elements to size themselves relative to the browser window. They make layouts fluid, responsive, and adaptable to any screen size — from mobile to desktop.

>>“Viewport units let your components scale with the screen itself.”

Note

✔ Great for full-screen sections, responsive typography, and hero banners
✔ No need for media queries for many responsive behaviors

📦 The 4 Main Viewport Units

UnitMeaningEquivalent
vw1% of viewport width1vw = 1% browser width
vh1% of viewport height1vh = 1% browser height
vmin1% of smaller dimensionmin(vw, vh)
vmax1% of larger dimensionmax(vw, vh)

📏 1. vw (Viewport Width)

vw Example

.full-width {
  width: 100vw; /* Full browser width */
}

50vw = half of the screen width

📐 2. vh (Viewport Height)

vh Example

.full-screen {
  height: 100vh; /* Full screen height */
}

Useful for hero sections, splash screens, or modals.

Note

⚠️ On mobile browsers, vh can be inconsistent because of dynamic address bars. Use dvh for accurate height.

🔢 3. vmin (Viewport Minimum)

vmin is based on the smaller of the viewport width or height.

vmin Example

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

Great for ensuring shapes scale proportionally to the smallest side of the screen.

🔺 4. vmax (Viewport Maximum)

vmax is based on the larger of the viewport dimensions.

vmax Example

.banner-text {
  font-size: 5vmax; /* Scales dramatically on large screens */
}

🧪 Practical Examples

📱 Responsive Typography with vw

Fluid Text Example

h1 {
  font-size: 5vw; /* Scales with width */
}

Note

🎯 Combine vw + rem for better control:
font-size: calc(1rem + 2vw);

🖼️ Full-Screen Hero Section

Hero Section

.hero {
  width: 100vw;
  height: 100vh;
  background: url('hero.jpg') center/cover;
}

🔘 Perfectly Scaled Circle Using vmin

Circle Example

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

Adjusts shape proportionally on all screens.

🏞️ vmax for Large Responsive Headlines

Headline

.headline {
  font-size: 8vmax;
}

🧬 Behavior Differences

UnitBest For
vwWidths, fluid text
vhFull-height sections
vminResponsive shapes, logos
vmaxMassive displays, hero text

⚠️ Common Pitfalls

  • ❌ vh issues on mobile due to dynamic browser bars
  • ❌ vw-based text can become too small on mobile
  • ❌ Using vmax can create excessively large elements
  • ❌ Forgetting accessibility — text should not depend only on vw

Note

💡 Modern alternative: dvw, dvh, svh, lvhfor accurate viewport sizing on mobile UX.

🔥 Summary

Viewport units (vw, vh, vmin, vmax) give you powerful tools for building responsive, fluid layouts without media queries. Use them with care, especially on mobile, and combine with relative units for best results.

>>“When the viewport changes, your design changes with it — automatically.”

Learn more →MDN Docs 📘