VW (Viewport Width) and VH (Viewport Height) are CSS length units that represent a percentage of the browser's viewport dimensions. 1vw = 1% of the viewport width, and 1vh = 1% of the viewport height. These units are part of the CSS Values and Units Module Level 3 specification and are widely supported across all modern browsers. They enable truly responsive designs that adapt fluidly to any screen size without relying on media queries.

The formula is: VW = (PX value / Viewport Width in px) × 100

For example, if your design is based on a 375px viewport width (like iPhone 6/7/8) and you want to convert 100px:

VW = (100 / 375) × 100 = 26.67vw

This means 100px is approximately 26.67% of a 375px-wide viewport. Use this calculator above for instant, accurate conversions.

The formula is: VH = (PX value / Viewport Height in px) × 100

For example, with a 667px viewport height and 100px:

VH = (100 / 667) × 100 = 14.99vh

VH is especially useful for full-screen sections, hero areas, and elements that need to scale with the viewport height on mobile devices.

Use VW/VH when you need:

• Fluid typography — font sizes that scale smoothly across all screen sizes
• Full-screen sections — hero banners or landing pages that fill the entire viewport
• Responsive spacing — margins and padding that adapt proportionally
• Scalable components — cards, modals, or containers that maintain aspect ratios

Use PX for elements that need precise, fixed sizing like icons, border widths, or when pixel-perfect control is required.

Yes! VW and VH have excellent browser support (97%+ globally). They are supported in:

• Chrome 20+
• Firefox 19+
• Safari 6+
• Edge 12+
• iOS Safari 6+
• Android Browser 4.4+

There are newer variants like dvh (dynamic viewport height) and svh (small viewport height) for handling mobile browser address bars, but classic VH remains fully supported.

Percentages (%) are relative to the parent element's dimensions, while VW/VH are always relative to the viewport (browser window). This is a crucial distinction:

• width: 50% → 50% of the parent container's width
• width: 50vw → 50% of the entire browser window width

VW/VH bypass the DOM hierarchy, making them ideal for top-level layout elements that need to ignore nested container constraints.

Absolutely! Using VW for font sizes enables fluid typography. A common technique is:

font-size: calc(16px + 0.5vw);

This creates a base font size that grows smoothly with the viewport. Many designers use the clamp() function for even better control:

font-size: clamp(1rem, 0.8rem + 1vw, 2.5rem);

This sets a minimum, fluid, and maximum font size — perfect for responsive headings.

Common viewport width breakpoints used in responsive design:

• 320px — Small smartphones (iPhone SE, older devices)
• 375px — iPhone 6/7/8, many Android phones
• 414px — iPhone 11/XR, larger smartphones
• 768px — iPad portrait, small tablets
• 1024px — iPad landscape, small laptops
• 1280px — Standard desktop monitors
• 1440px — High-resolution laptops
• 1920px — Full HD desktop displays

When converting PX to VW, knowing your design's target viewport is essential for accurate results.

This is a known challenge! On mobile browsers (especially Safari on iOS and Chrome on Android), the address bar collapses as users scroll, changing the effective viewport height. Traditional VH includes the address bar area, which can cause layout shifts.

Newer CSS units address this:

• dvh (dynamic VH) — adapts as the address bar shows/hides
• svh (small VH) — assumes the address bar is visible
• lvh (large VH) — assumes the address bar is hidden

For production, consider using 100dvh for full-screen mobile layouts, with a fallback to 100vh for older browsers.

The reverse formula is: PX = (VW value × Viewport Width in px) / 100

For example, if you have 5vw on a 1440px wide screen:

PX = (5 × 1440) / 100 = 72px

This is useful when you need to determine the actual pixel size a VW-based element will render at on a specific screen. Use the reverse converter in this tool for quick calculations.