Viewport Units Calculator
Translate between pixels and viewport units at any screen size, with device presets — so you know exactly what a vw or vh rule will resolve to before you commit it.
See the pixels behind the percentage
Viewport units are easy to write and hard to picture. Is 8vw a sensible heading size or an accident waiting to happen on a phone? Resolving the unit to pixels at a few real device sizes answers that instantly, and switching the preset shows how far the value swings across the range you actually support.
When a raw vw proves too volatile, wrap it in a floor and ceiling with the CSS clamp() generator, or convert to font-relative units with the px, rem & em converter.
Frequently Asked Questions
What are vw and vh?
They are viewport-relative length units. 1vw equals 1% of the viewport's width and 1vh equals 1% of its height, so on a 1920×1080 screen 1vw is 19.2px and 1vh is 10.8px. Because they track the window rather than a font-size or a parent element, they are useful for full-bleed sections, hero heights, and type that should scale with the screen.
How do I convert a pixel value to vw?
Divide the pixel length by the viewport width and multiply by 100. At 1920px wide, a 192px element is 192 ÷ 1920 × 100 = 10vw. This calculator does that both ways and for both axes, so you can enter a px, vw, or vh value and read the other two at the viewport size you choose.
Why does the same vw value look different on different screens?
Because it is a percentage of the viewport, not a fixed size. 5vw is 96px on a 1920px desktop but only about 19.5px on a 390px phone. That is exactly why fluid layouts often pair viewport units with clamp() — to keep a value scaling with the screen while pinning sensible minimum and maximum sizes so it never becomes unreadably small or comically large.
Should I set font-size purely in vw?
Usually not on its own. Pure vw type can shrink below a legible size on narrow screens and blow up on very wide ones, and it can interfere with a user's zoom. The common, more robust approach is clamp(min, preferred-with-vw, max), which keeps the fluid behaviour between two breakpoints and holds steady outside them.
A convenience converter using the CSS viewport (not accounting for scrollbar width or mobile dynamic-toolbar behaviour). Confirm against your browser at the target size.