Viewport Unit Converter
Convert a pixel size into vw, vh, vmin and vmax for a given screen — responsive CSS units done without guesswork.
How it works
vw = px ÷ width × 100 · vh = px ÷ height × 100 · vmin = px ÷ min(w,h) × 100 · vmax = px ÷ max(w,h) × 100
Viewport units are percentages of the browser window: 1vw is 1% of the viewport width, 1vh is 1% of its height, and vmin/vmax track the smaller or larger of the two. They let type and spacing scale fluidly with the screen instead of jumping at breakpoints. The catch is that they scale relative to *this* viewport — a value that looks right on a 1440px desktop can be huge on a 4K monitor or tiny on a phone, which is why fluid type usually clamps a vw value between a min and max with clamp().
Worked example
A 48px heading on a 1440×900 screen: 48 ÷ 1440 × 100 = 3.33vw, or 48 ÷ 900 × 100 = 5.33vh. Since 900 is the smaller dimension, vmin equals 5.33vmin and vmax equals 3.33vmax.
Frequently asked questions
When should I use vmin vs vw?
vmin scales with the shorter side, so it keeps square or full-screen elements from overflowing when a phone rotates to landscape. vw is fine for widths that should track the horizontal space specifically.
Why does 100vh cause problems on mobile?
Mobile browsers count the space under the address bar in 100vh, so a full-height section can be clipped as the bar hides and shows. The newer dvh, svh and lvh units (dynamic, small, large viewport height) were added to fix exactly this.
How do I stop viewport type getting absurdly large?
Wrap it in clamp(min, preferred-vw, max), e.g. font-size: clamp(1rem, 3vw, 2rem). The browser uses the vw value only while it stays between the floor and ceiling.
Related calculators
This calculator is for educational purposes. Double-check important results before acting on them.