VW and VH Units in CSS: Creating Truly Responsive Layouts
Master viewport units in CSS. Learn how vw and vh work, common use cases, pitfalls to avoid, and practical responsive design patterns with examples.
What Are Viewport Units?
Viewport units are CSS units relative to the browser viewport (the visible area of the web page). There are four main viewport units: vw (viewport width), vh (viewport height), vmin (whichever is smaller), and vmax (whichever is larger).
1vw equals 1% of the viewport width. On a 1200px-wide screen, 1vw is 12px. On a 375px-wide phone, 1vw is 3.75px. This makes viewport units ideal for creating truly fluid designs that scale continuously with the screen size.
Common Use Cases
Full-screen hero sections
.hero {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}Fluid typography
/* Text that scales with viewport */
h1 {
font-size: clamp(2rem, 5vw, 4.5rem);
}
/* clamp() prevents text from getting too small or too large */
p {
font-size: clamp(1rem, 2vw, 1.25rem);
}Full-width elements
.full-bleed {
width: 100vw;
margin-left: calc(-50vw + 50%);
}The 100vh Mobile Problem
On mobile browsers like Safari and Chrome on iOS, the address bar and bottom navigation bar take up screen space. When they are visible, 100vh is taller than the actual visible area, causing a scrollbar on what should be a full-screen element.
The fix is to use dynamic viewport units introduced in newer CSS specifications:
- dvh (dynamic viewport height): Adjusts as the address bar shows/hides
- svh (small viewport height): Always the smallest possible viewport
- lvh (large viewport height): Always the largest possible viewport
/* Modern fix for mobile */
.hero {
height: 100dvh; /* Adapts to address bar changes */
}
/* Fallback for older browsers */
.hero {
height: 100vh;
height: 100dvh;
}Convert PX to Viewport Units
Free PX to VW Converter
Convert pixels to viewport width units. Set your viewport width for accurate results.
Try it freeFree PX to VH Converter
Convert pixels to viewport height units for responsive designs.
Try it freeRelated Articles
CSS Units Explained: PX vs REM vs EM vs VW vs VH in 2026
A complete guide to CSS units. Learn when to use pixels, rem, em, vw, and vh with practical examples and conversion tips for responsive web design.
CSSPX to REM Conversion: Why You Should Stop Using Pixels in CSS
Learn why rem units are better than pixels for accessible, responsive web design. Includes conversion formula, examples, and a free PX to REM converter tool.
CSSCSS to Tailwind Migration: A Complete Step-by-Step Guide
Migrate your CSS codebase to Tailwind CSS with this practical guide. Covers class mapping, responsive design conversion, and a free automated converter tool.