Practical guide · dimensions explained
PX to VW and VH: a worked viewport example
Translate a layout length into viewport units and understand why a mobile browser can change the visible space.
Reviewed September 28, 2026 · Worked examples calculated for this guide
Measure the layout viewport
Use viewport dimensions in CSS pixels, rather than a device’s advertised hardware resolution. A design rendered at 1440 CSS px wide can use a different number of native display pixels. For vw and vh, supply the corresponding large viewport dimensions. The calculator uses your numbers; it does not guess the physical size or copy the current browser viewport.
Convert a banner in both directions
For a viewport 1440 px wide, a 360 px banner occupies 360/1440 × 100 = 25 vw. On a 390 px viewport, 25 vw occupies 97.5 px. If the intended banner should stay 360 px wide on the smaller viewport, its percentage would instead be about 92.307692 vw. These are different design requirements, even though they start with the same desktop mockup.
Height needs another reference
With a large viewport 900 px tall, 450 px is 50 vh. A height percentage does not use the viewport width. On mobile, the address bar can reduce the visible space while vh remains tied to the large viewport. Small and dynamic viewport units address other viewport states. This tool intentionally asks for the large dimensions used by vw and vh.
Use a layout rule, not one frozen conversion
A conversion shows equivalence at one chosen viewport. It does not prove that the layout will remain readable at every size. Test wrapping, scrolling, zoom and browser controls. If a heading uses viewport units, consider a design that also responds to the user’s font settings and has appropriate limits; verify the final result rather than treating a converted number as a complete responsive design.
Reference notes
References checked September 28, 2026. Calculations and worked examples are our own.