Viewport Width Calculator

Calculate viewport-relative CSS units (vw, vh, vmin, vmax) for responsive layouts.

How to Use Viewport Width Calculator

1

Enter a viewport width

Type the screen width in pixels to calculate units for.
2

Enter a target size

Type the desired element size in pixels.
3

Get vw value

See the equivalent value in vw, vh, and other viewport units.

Tested tool guide Tested browser tools Checked August 16, 2026

What Viewport Width Calculator does, with a checked example

Type a viewport width and height - the design width of a phone or the window you are targeting - and this page converts between pixels and the four viewport units: vw, vh, vmin, and vmax. It works in both directions: 720px at a 1440px-wide window is 50vw, and 6.4vw at 375px wide is 24px. The thing users get wrong: these units measure the window or iframe, not the screen, and on mobile the address bar changes the height, so a vh value computed here may not match what actually renders.

Worked example

A concrete input and expected output from the current implementation.

Input

Viewport 375 x 812, target 24 px

Expected output

24 px = 6.4vw (and 6.4vmin, since 375 is the smaller dimension)

24 is 6.4 percent of 375, and vmin resolves against the smaller of the two dimensions, which is also 375, so both conversions land on the same value.

How the result is produced

One rule for all four units

Each unit is a percentage of the viewport: 1vw is 1 percent of the width, 1vh is 1 percent of the height, and vmin and vmax resolve to 1 percent of the smaller or larger of the two. The tool computes the pixel value of one unit and its inverse, so a pixel target converts to a unit value and back with the same pair of numbers.

The viewport is the window, not the screen

The reference size is the browser window's inner dimensions, or the iframe's, after the user's zoom setting, so the same CSS resolves to different pixels on different machines. On phones the height shrinks and grows as browser chrome appears and collapses, which is why the newer svh, lvh, and dvh units exist. The tool takes the two numbers you type and does the arithmetic locally; nothing is uploaded.

Good uses

Translating a Figma spec: the design says 24px at 375px wide, and you need the vw value so the spacing scales with the window instead of staying fixed.
Auditing existing CSS: you inherited vmin-based type or 100vh hero sections and want to know what those actually resolve to at the breakpoints you support.
Choosing between vmin and vmax for a headline that must fit both a narrow portrait phone and a short landscape window, checking which unit keeps the size inside bounds in each case.

Limits and checks

The result is a snapshot for the numbers you typed. Resize the window, change browser zoom, or rotate the phone and every value changes; a vw computed at 1440px is different at 1024px by definition.
100vw is not always the width of the visible area. Where the browser reserves scrollbar space inside the viewport width, a full-width element sized 100vw can overflow by the scrollbar's width and introduce a horizontal scrollbar.
On mobile, 100vh can be taller than the visible area: some browsers measure vh against the viewport with the address bar hidden. Sections sized 100vh here may overflow on first paint or jump when the chrome collapses; consider svh or dvh in the CSS instead.

Common questions

Do these units depend on the screen resolution?

No. vw, vh, vmin, and vmax resolve against the CSS viewport - the window's inner size after zoom - not the physical panel. A phone whose screen is 1170 physical pixels wide typically reports 390 CSS pixels, and 100vw is 390px. What renders depends on the device's pixel ratio, not on the unit's arithmetic.

Will 100vh fit the visible screen on a phone?

Not reliably. On mobile, vh can be measured against a viewport that includes space hidden behind the address bar, so 100vh may be taller than what is visible, and the visible height itself changes as the bar collapses while scrolling. The svh, lvh, and dvh units exist for exactly this. This tool computes the arithmetic for the numbers you enter; it cannot know a browser's current chrome state.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.