Developer Tools

VW VH Calculator

Calculate vw and vh viewport units. Convert viewport percentages for responsive CSS layouts with multiple device previews.

Use VW VH Calculator to get instant results without uploads or sign-ups. Everything runs securely in your browser for fast, reliable output.

Your results will appear here.

Ready to run.

About this tool

Viewport units scale with browser window. 1vw = 1% width, 1vh = 1% height. Perfect for full-screen layouts, responsive typography, and fluid sizing.

Includes vmin (smaller of vw/vh) and vmax (larger of vw/vh) for aspect-ratio-aware layouts. Works with calc() for hybrid responsive designs. Preview across mobile, tablet, and desktop viewports.

Usage examples

Full Screen Hero

Cover entire viewport

width: 100vw; height: 100vh; (1920×1080 = 1920px × 1080px)

Responsive Typography

Fluid font sizing

font-size: 5vw; (1920px wide = 96px, 375px wide = 18.75px)

Square Element

Always square regardless of viewport

width: 50vmin; height: 50vmin; (maintains 1:1 ratio)

How to use

  1. Enter viewport dimensions
  2. Enter vw/vh values
  3. Get pixel equivalents across devices
  4. Use in responsive CSS with vmin/vmax support

Benefits

  • Viewport calculations
  • Multi-device preview
  • vmin/vmax support
  • Fluid typography
  • CSS-ready code
  • Common device dimensions
  • Aspect ratio aware

FAQs

What are vw and vh units?

vw = viewport width (1vw = 1% of width). vh = viewport height (1vh = 1% of height). On 1920x1080 screen: 10vw = 192px, 10vh = 108px. Scale automatically with viewport changes. Unlike % which relates to parent, viewport units always relate to browser window.

What is the difference between vmin and vmax?

vmin = smaller dimension (width or height). vmax = larger dimension. On 1920×1080: vmin = vh (1080 is smaller), vmax = vw (1920 is larger). On portrait 375×812: vmin = vw, vmax = vh. Use vmin for elements that should fit in viewport regardless of orientation.

Why does 100vh cause scrollbars on mobile?

Mobile browsers have dynamic UI (address bar, toolbars) that shrink viewport height. 100vh includes hidden area, causing overflow. Solutions: use 100svh (small viewport height), 100dvh (dynamic), or calc(100vh - safe area). Modern approach: use dvh units for mobile-friendly full-height.

When should I use viewport units vs percentages?

Use viewport units for full-screen sections, fluid typography, and elements sized relative to viewport. Use % for elements sized relative to parent container. Combine both: width: 80% (container-relative), max-width: 90vw (viewport limit). Viewport units break out of parent constraints.

How do I create fluid typography with viewport units?

Use clamp() for bounded fluid sizing: font-size: clamp(16px, 2vw, 24px). Stays 16px minimum, 24px maximum, scales with viewport between. Or calc(): font-size: calc(16px + 1vw). Ensure minimum 16px for accessibility. Test across 320px (tiny) to 1920px+ (desktop) viewports.

Related tools

View all tools
Border Radius GeneratorBox Shadow GeneratorCSS Gradient Calculator

Border Radius Generator

Generate CSS border-radius code for rounded corners. Create custom corner shapes with individual radius controls.

Developer Tools

Box Shadow Generator

Generate CSS box-shadow code for depth and elevation effects. Create multiple shadows with custom blur, spread, and color.

Developer Tools

CSS Gradient Calculator

Generate CSS gradient code for linear and radial gradients. Create beautiful color gradients with angle and color stops.

Developer Tools