VH / VW Calculator
Convert between viewport units (vh/vw) and pixels. Updates in real time as you resize your browser.
Viewport Width
--
Viewport Height
--
Viewport Units to Pixels
--
--
Pixels to Viewport Units
--
--
Convert between viewport units (vh/vw) and pixels. Updates in real time as you resize your browser.
Viewport units are CSS length units relative to the size of the browser window. One vw equals one percent of the viewport width, and one vh equals one percent of the viewport height. These units are extremely useful for creating responsive layouts that adapt to any screen size. This calculator lets you instantly see how viewport units translate to actual pixel values on your current screen and vice versa.
Viewport units are ideal for full-screen hero sections, responsive typography, and layouts that need to fill the entire browser window. For example, setting an element's height to 100vh makes it exactly as tall as the viewport, regardless of screen resolution. Similarly, font sizes set in vw units will scale proportionally with the browser width, creating truly fluid typography without media queries.
While percentages are relative to the parent element, viewport units are always relative to the browser window itself. This means 50vw is always half the window width, even if the element is nested deeply inside other containers. Percentages, on the other hand, depend on the dimensions of the nearest positioned ancestor. Understanding this distinction is key to choosing the right unit for your design needs.
height: 100vhfont-size: clamp(1rem, 2.5vw, 2rem)max-height: 100vh