~/frontend-tools/viewport-unit-calculator
Viewport Unit Calculator
Work out viewport units for real screen sizes: convert pixels to vw, vh, vmin and vmax and back, using device presets. Then build a fluid clamp() size that grows smoothly from a minimum on phones to a maximum on desktops.
Pixels and viewport units
Fluid size with clamp()
Using the Viewport Unit Calculator
Viewport units in one sentence
1vw is one percent of the browser window's width, so on a 1440px wide screen 1vw is 14.4px and on a 390px phone it is 3.9px. That makes viewport units ideal for things that should scale with the screen, and risky for text, which can become tiny or huge.
Fluid type with clamp()
clamp(min, preferred, max) picks the preferred value but never goes below the minimum or above the maximum. A preferred value mixing rem and vw, such as 1rem + 2vw, grows with the screen while staying anchored to the user's font size. The calculator works out the exact slope between your two widths.
Accessibility
Pure vw font sizes ignore browser zoom on some setups and fail WCAG's resize-text requirement. The clamp() output always includes a rem component and rem limits, so zooming and larger default font sizes still work.
Mobile toolbars
On phones, 100vh can be taller than the visible area because of the address bar. For full-height sections use 100dvh (dynamic) or 100svh (small), which account for the toolbars.
Frequently asked questions
What viewport sizes should I test?
Common widths are 360 to 430px for phones, 768 to 1024px for tablets and 1280 to 1920px for desktops. The presets cover these.
Can I use clamp() for spacing too?
Yes. Fluid padding and gaps work the same way as fluid type.
Is clamp() supported?
Yes, in all current browsers.