Investigating New CSS Viewport Relative Units

CSS viewport relative units have been foundational to responsive web design for over a decade, enabling developers to create layouts that scale with the user's viewport. However, the traditional vh, vw, vmin, and vmax units have significant limitations, particularly on mobile devices where browser chrome dynamically affects the visible viewport.

The CSS Working Group addressed these challenges by introducing a new generation of viewport units--small (sv*), large (lv*), and dynamic (dv*) variants--that provide granular control over how elements respond to viewport changes. This guide explores these modern viewport units, their browser support, practical applications, and how to leverage them for more robust responsive designs.

Throughout this guide, you will learn how to implement each unit type with production-ready code examples, understand browser support considerations, apply performance optimization techniques, and integrate these units into your existing responsive web development workflow. Whether you are building full-screen hero sections, sticky navigation, or fluid typography systems, mastering these modern viewport units will help you create experiences that adapt seamlessly to the diverse ways users access the web today.

The adoption of these new units represents a significant shift in how we approach responsive design--moving from fixed viewport assumptions to fluid, state-aware layouts that respect the dynamic nature of modern mobile browsers. For teams looking to implement comprehensive SEO optimization strategies, ensuring your responsive implementations don't compromise search performance is essential.

The Evolution of Viewport Units: From Traditional to Modern

Traditional Viewport Units and Their Limitations

The original viewport units (vh, vw, vmin, vmax) were introduced in CSS Values Level 3, providing developers with a way to size elements relative to the viewport dimensions. These units quickly became essential tools for creating responsive layouts:

/* Traditional viewport units */
.hero {
 height: 100vh; /* 100% of viewport height */
 width: 100vw; /* 100% of viewport width */
 font-size: 2vmin; /* Smaller of width or height */
}

However, traditional viewport units face a fundamental challenge on mobile devices: the viewport height changes as users scroll because browser chrome (address bars, toolbars) shows and hides dynamically. This means 100vh can extend beyond the visible area, causing unwanted scroll behavior and layout issues.

The CSS Values Level 4 Solution

CSS Values Level 4 introduced small, large, and dynamic viewport variants to address these mobile-specific challenges:

• Small viewport units (svh, svw): Reference the smallest viewport (chrome visible)
• Large viewport units (lvh, lvw): Reference the largest viewport (chrome hidden)
• Dynamic viewport units (dvh, dvw): Adjust in real-time based on current state

The W3C specification updates for viewport-relative units emerged from years of community feedback and browser implementation experience. The working group recognized that mobile browsers had fundamentally changed how users interact with web content, and the existing CSS specification did not account for the dynamic viewport behavior introduced by shrinking browser chrome during scroll. After extensive prototyping and browser vendor collaboration, the specification reached Candidate Recommendation status in late 2024, with full Baseline Widely Available support following in June 2025. This adoption timeline reflects the careful balance between feature stability and browser vendor commitment to modern CSS capabilities.

The new units follow a consistent naming pattern across all viewport dimensions: the prefix indicates the viewport state (s for small, l for large, d for dynamic), followed by the dimension indicator (h for height, w for width, min/max for minimum/maximum dimension, i/inline for inline dimension, and b/block for block dimension). This systematic approach ensures that developers can apply the same conceptual framework across all viewport-relative sizing scenarios.

Understanding the New Viewport Unit Types

Small Viewport Units (svh, svw, svmin, svb)

Small viewport units reference the smallest viewport size--when browser chrome is fully visible. On mobile devices, this is the initial state when address bars and navigation controls occupy screen space.

/* Small viewport height - chrome visible */
.hero-small {
 height: 100svh;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* Small viewport width */
.sidebar-small {
 width: 20svw;
 flex-shrink: 0;
}

/* Small viewport minimum for responsive squares */
.responsive-icon {
 width: 5svmin;
 height: 5svmin;
}

Best Use Cases:

• Initial page load states where chrome is visible
• Mobile-first navigation patterns
• Elements that should fit within the constrained viewport
• Consistent cross-scroll-state sizing

Large Viewport Units (lvh, lvw, lvmin, lvb)

Large viewport units reference the largest viewport size--when browser chrome is hidden during scroll. This provides access to maximum available screen real estate.

/* Large viewport height - chrome hidden */
.hero-large {
 height: 100lvh;
}

/* Large viewport width for fluid layouts */
.container-wide {
 width: 90lvw;
 margin: 0 auto;
}

/* Large viewport minimum for responsive elements */
.responsive-box {
 width: 40lvmin;
 height: 40lvmin;
}

Best Use Cases:

• Full-screen immersive experiences
• Scroll-triggered animations and transitions
• Maximizing content area after initial load
• Dynamic content that adapts to available space

Dynamic Viewport Units (dvh, dvw, dvmin, dvb)

Dynamic viewport units automatically adjust based on the current viewport size, whether chrome is visible or hidden. This provides the most fluid responsive behavior.

/* Dynamic viewport height - adjusts with scroll */
.hero-dynamic {
 height: 100dvh;
 transition: height 0.3s ease;
}

/* Dynamic viewport width for fluid layouts */
.fluid-grid {
 width: 95dvw;
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
 gap: 2dvh;
}

/* Progressive enhancement with fallback */
.adaptive-element {
 height: 100dvh; /* Modern browsers */
 height: 100vh; /* Fallback */
}

Best Use Cases:

• Truly fluid responsive layouts
• Sticky elements that maintain position
• Visual elements synchronized with viewport state
• Progressive enhancement patterns

Viewport States Comparison

When implementing viewport units, understanding how each type responds to mobile browser chrome is essential for choosing the right unit:

The diagram above illustrates how small viewport units always reference the constrained viewport (chrome visible), large viewport units reference the expanded viewport (chrome hidden), and dynamic viewport units smoothly transition between states as the user scrolls. This behavior is particularly important when implementing full-screen hero sections, modals, and mobile navigation patterns where element sizing must remain visually consistent regardless of browser chrome state.

For developers building responsive websites that must perform flawlessly on mobile devices, understanding these viewport state differences is crucial for avoiding common layout bugs such as content being cut off, unwanted scrollbars, or elements positioned incorrectly relative to the visible viewport area.

Browser Support and Compatibility

Current Support Status

According to Web Platform DX's official feature tracking, the small, large, and dynamic viewport units achieved Baseline Widely Available status on June 5, 2025, meaning they are supported across all major browser versions released in the preceding 24 months.

Approximately 96.4% of users worldwide access the web with browsers supporting traditional viewport units, with the new variants achieving rapidly increasing adoption.

Handling Legacy Browsers

Implement progressive enhancement for viewport units:

/* Layered approach for viewport units */
.adaptive-layout {
 /* Modern browsers get dynamic units */
 height: 100dvh;
 width: 100dvw;

 /* Large viewport for browsers without dynamic support */
 @supports not (height: 100dvh) {
 height: 100lvh;
 }
}

/* Container queries with viewport fallback */
.component {
 width: 100%;
 max-width: 65ch;
}

/* JavaScript-based viewport detection */
function getOptimalHeight() {
 if (CSS.supports('height: 100dvh')) {
 return '100dvh';
 } else if (CSS.supports('height: 100lvh')) {
 return '100lvh';
 } else {
 return '100vh';
 }
}

The @supports CSS at-rule provides an elegant mechanism for feature detection, allowing developers to layer progressive enhancement strategies. By testing for the most capable unit first and progressively falling back to simpler alternatives, you can ensure that all users receive an appropriate experience regardless of their browser capabilities. This approach aligns with modern web development best practices for maintainable CSS architectures that gracefully degrade without compromising core functionality.

Practical Applications and Code Patterns

Full-Screen Hero Sections

Modern approaches to hero sections that work reliably across all devices:

/* Adapts to viewport changes */
.hero-modern {
 height: 100dvh;
 min-height: 600px;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}

/* Alternative: Fixed positioning for consistent full-screen */
.hero-fixed {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100dvh;
 z-index: -1;
}

Sticky Headers and Navigation

Implementation of sticky navigation that works with dynamic viewport units:

/* Sticky header maintaining visibility */
.header {
 position: sticky;
 top: 0;
 z-index: 100;
 height: 60px;
 background: rgba(255, 255, 255, 0.95);
 backdrop-filter: blur(10px);
}

/* Content offset for scroll-anchor links */
.scroll-offset {
 scroll-margin-top: 60px;
}

/* Mobile bottom navigation */
.mobile-nav {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: calc(100svh - 100lvh + 80px);
}

Fluid Typography and Spacing

Modern CSS techniques for fluid design using viewport units:

/* Viewport-based typography clamp */
.fluid-heading {
 font-size: clamp(2rem, 5vw + 1rem, 5rem);
 line-height: 1.1;
}

/* Responsive spacing */
.responsive-spacing {
 padding: 2dvh 4dvw;
 margin-bottom: 3dvh;
}

/* Grid layouts with viewport units */
.responsive-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(30svw, 1fr));
 gap: 2dvh 4dvw;
}

These practical patterns demonstrate how modern viewport units solve real-world layout challenges. By choosing the appropriate unit type for each use case, developers can create responsive web applications that adapt intelligently to the diverse viewport configurations users encounter across devices and browsers.

Modal and Overlay Patterns

Full-screen modals and overlays benefit significantly from dynamic viewport units:

/* Full-screen overlay */
.modal-overlay {
 position: fixed;
 inset: 0;
 width: 100dvw;
 height: 100dvh;
 display: flex;
 justify-content: center;
 align-items: center;
 background: rgba(0, 0, 0, 0.5);
 z-index: 1000;
}

/* Modal content with safe area inset */
.modal-content {
 width: 90dvw;
 max-width: 500px;
 max-height: 85dvh;
 overflow-y: auto;
 border-radius: 12px;
 padding: 1.5rem;
}

Performance Considerations

Layout Thrashing and Reflows

Dynamic viewport units (dvh, dvw) trigger layout recalculations as the viewport changes, which can cause performance issues on lower-powered devices:

/* Problem: Continuous layout recalculation */
.performance-issue {
 height: 100dvh;
 transition: height 0.3s ease; /* Triggers reflow on scroll */
}

/* Solution: Use large viewport for stable sizing */
.performance-optimized {
 height: 100lvh; /* Height remains constant during scroll */
}

/* Solution: Use CSS containment */
.isolated-element {
 height: 100dvh;
 contain: layout paint; /* Isolates from rest of layout */
}

/* Solution: Transform instead of height */
.animated-element {
 height: 100lvh;
 transform: translateY(0);
}

.animated-element.scrolled {
 transform: translateY(-50px); /* GPU-accelerated */
}

Best Practices for Performance

1. Prefer static units for fixed-position elements: Use lvh for elements that don't need to respond to viewport changes during scroll
2. Use CSS containment: Apply contain: layout paint to elements using dynamic units
3. Minimize viewport-unit-dependent animations: Complex animations tied to dvh can trigger excessive reflows
4. Test on low-powered devices: Emulate mid-range mobile devices to identify issues early

Performance-Optimized Hero Example

.perf-hero {
 height: 100lvh;
 position: relative;
 overflow: hidden;
}

/* Parallax using transforms (GPU-accelerated) */
.perf-hero__bg {
 position: absolute;
 inset: 0;
 transform: translateZ(0);
 will-change: transform;
}

.perf-hero__content {
 position: relative;
 z-index: 1;
}

When building performant web applications, understanding the relationship between viewport units and browser rendering pipelines is essential. Dynamic viewport units, while providing the most fluid user experience, require careful consideration of the performance implications on resource-constrained devices. The techniques outlined above help maintain smooth scrolling and responsive interactions while leveraging the benefits of modern viewport units. For teams focused on AI-powered automation solutions, ensuring your front-end implementations remain performant is critical for delivering exceptional user experiences.

Advanced Techniques

Container Queries with Viewport Units

Combining container queries with viewport units for complex responsive patterns:

/* Container-based responsive design */
.card-container {
 container-type: inline-size;
 container-name: card;
}

/* Fallback: Viewport units without container queries */
.card {
 width: 100%;
 max-width: 400px;
}

@supports not (container-type: inline-size) {
 .card {
 width: 90dvw;
 max-width: 400px;
 }
}

@container card (min-width: 300px) {
 .card {
 display: grid;
 grid-template-columns: 150px 1fr;
 }
}

CSS Custom Properties for Viewport Units

Creating maintainable systems using CSS custom properties with viewport units:

/* Design tokens using viewport units */
:root {
 /* Viewport-based spacing */
 --space-xs: 1dvh;
 --space-sm: 2dvh;
 --space-md: 4dvh;
 --space-lg: 8dvh;

 /* Viewport-based sizing */
 --viewport-height: 100dvh;
 --header-height: 60px;
 --safe-area-bottom: env(safe-area-inset-bottom);

 /* Dynamic calculations */
 --content-height: calc(var(--viewport-height) - var(--header-height));
}

/* Usage example */
.section {
 padding: var(--space-md);
 min-height: calc(var(--viewport-height) - var(--header-height));
}

/* Theme switching with viewport units */
@media (prefers-color-scheme: dark) {
 :root {
 --bg-color: #0f172a;
 --text-color: #f8fafc;
 }
}

These advanced patterns demonstrate how modern viewport units integrate with container queries and CSS custom properties to create sophisticated, maintainable design systems. By establishing design tokens based on viewport units, teams can create consistent spacing and sizing that adapts fluidly across different viewport configurations while maintaining the predictability required for production applications.

The combination of viewport units with container queries represents a powerful approach to component-based responsive design. Components can now respond to both their container's dimensions and the overall viewport, enabling truly modular responsive layouts that work across different page contexts and device types.

Sources

• Web Platform DX: Small, Large, and Dynamic Viewport Units
• Can I Use: Viewport Units
• MDN Web Docs: CSS Length Values
• Terluin Web Design: 20 New CSS Viewport Units