Viewport units
Convert px ↔ vw / vh for a screen size
Translate a size in pixels into viewport units, and see what vw, vh, vmin and vmax give for a given screen size. Useful for elements that should take up a fraction of the window rather than a fixed size.
How it works
A viewport unit is one hundredth of the matching window dimension. So 1vw is a hundredth of its width and 1vh a hundredth of its height. vmin and vmax take the smaller and the larger of the two respectively.
vw = px ÷ window width × 100 vh = px ÷ window height × 100 vmin = against the smaller dimension vmax = against the larger one
Frequently asked questions
Why does 100vh overflow on mobile?
Because mobile browsers count the address bar in the viewport height even though it retracts on scroll. The dvh, svh and lvh units were introduced for this: dvh follows the height actually available.
Can I size text in vw?
Yes, but never on its own: text in pure vw becomes unreadable on a very small screen and oversized on a very large one. The clamp() function lets you bound the result between a minimum and a maximum.