Convert vw, vh, vmin, vmax, and px for a chosen viewport size, then compare one-unit references and common responsive breakpoints. Use it to test different inputs quickly, compare outcomes, and understand the main factors behind the result before moving on to related tools or deeper guidance.
Last updated
Convert a CSS viewport unit into pixels for a chosen device size, then compare how the same value reads in vw, vh, vmin, and vmax.
This is most useful for fluid typography, responsive spacing, hero sizing, and quick design-tool checks when a CSS spec uses viewport units instead of fixed pixels.
Unit guidance
1vw equals 1% of the viewport width. This is the classic unit for fluid widths and font ramps tied to screen width.
Pixel equivalent
960 px
50vw equals 960px on a 1920×1080 viewport (16:9, landscape).
50
Equivalent in vw
88.89
Equivalent in vh
88.89
Equivalent in vmin
50
Equivalent in vmax
One-unit references
1vw
19.2 px
1vh
10.8 px
1vmin
10.8 px
1vmax
19.2 px
Viewport context
Aspect ratio
16:9
Orientation
landscape
Shorter side
1,080 px
Longer side
1,920 px
Common viewport-width references
1vw
19.2 px
5vw
96 px
10vw
192 px
25vw
480 px
50vw
960 px
100vw
1,920 px
For fluid typography, the safest pattern is usually a clamped value rather than a pure viewport unit, because unclamped `vw` sizing can become too small on tiny screens and too large on wide desktops.
This calculator uses the classic viewport units only. Modern CSS also adds small, large, and dynamic viewport variants for mobile-browser UI changes, so production code should still be verified in the target browser.
Viewport width calculator: convert vw, vh, vmin, vmax, and px for responsive CSS
A viewport width calculator turns CSS viewport units into concrete pixel values for a chosen screen size so you can sanity-check responsive spacing, fluid typography, and hero sizing before you ship. This page is built for the real questions designers and front-end developers ask: how many pixels is 10vw, when should you use vh instead of vw, and what changes when vmin or vmax is tied to the shorter or longer viewport side?
What viewport units mean in CSS
Viewport-relative lengths are percentages of the visible browser viewport. `vw` follows the viewport width, `vh` follows the viewport height, `vmin` follows the shorter side, and `vmax` follows the longer side. That makes them useful when a layout or type scale needs to respond continuously rather than jump only at breakpoint boundaries.
A viewport width calculator is most valuable because raw CSS values do not always feel intuitive during design review. A rule such as `font-size: 3.5vw` or `padding-inline: 6vmin` sounds abstract until you can translate it into pixels on a 390×844 phone, a 1366×768 laptop, or a 1920×1080 desktop.
How the conversion works
The arithmetic is direct once the viewport dimensions are known. One `vw` is 1% of the viewport width, one `vh` is 1% of the viewport height, one `vmin` is 1% of the shorter dimension, and one `vmax` is 1% of the longer dimension. Converting from a viewport unit into pixels is just multiplication by that one-unit basis.
Converting pixels back into viewport units is the same relationship in reverse. Divide the pixel value by the relevant one-unit basis and you get the equivalent viewport-relative length. This page exposes both directions so you can move from CSS to design-tool measurements and back again without doing the algebra manually.
1vw = viewport width / 100
Use when a value is tied directly to the horizontal viewport size.
1vh = viewport height / 100
Use when a value should respond to the visible viewport height.
1vmin = min(width, height) / 100
The shorter side becomes the basis, which helps keep sizing conservative across orientation changes.
1vmax = max(width, height) / 100
The longer side becomes the basis, which can be useful for large hero or background treatments.
When to use vw, vh, vmin, or vmax
Use `vw` when the design intent is clearly tied to width: fluid headings, horizontal spacing, max-width experiments, and breakpoint-free width scaling. Use `vh` when the design intent is tied to visible height, such as full-screen hero sections, vertical rhythm experiments, or viewport-height offsets.
Use `vmin` when the element should stay bounded by the smaller side of the screen. This is common for squares, circles, or lockups that need to survive portrait and landscape rotations without growing too aggressively. Use `vmax` more carefully for large decorative treatments or layouts that intentionally follow the dominant dimension of the screen.
For typography, pure viewport units can be risky on their own. A line of type that scales only with `vw` may become too small on compact phones or too large on ultra-wide screens. In practice, fluid typography is usually safer when viewport units are wrapped inside `clamp()` so the size still has sensible minimum and maximum bounds.
Worked examples and practical interpretation
On a 1920×1080 desktop viewport, `10vw` equals 192px because one `vw` is 19.2px. On the same screen, `10vh` equals 108px because one `vh` is 10.8px. That simple comparison shows why `vw`-based typography grows much faster horizontally than `vh`-based spacing on a wide landscape display.
On a 390×844 phone viewport, `50vmin` equals 195px because the shorter side is 390px, so one `vmin` is 3.9px. By contrast, `50vmax` equals 422px because the longer side is 844px. That difference is exactly why `vmin` and `vmax` are useful for orientation-aware responsive design: they let you choose whether the short side or long side should control the result.
Frequently asked questions
What is the difference between vw and vh?
`vw` is based on viewport width, while `vh` is based on viewport height. If the browser is 1200px wide, then `1vw` is 12px. If it is 800px tall, then `1vh` is 8px. A viewport width calculator helps because the difference becomes significant on wide landscape screens, tall portrait screens, and responsive layouts where width and height change independently.
When should I use vmin or vmax instead of vw?
Use `vmin` when the shorter side of the viewport should control the size, such as circular badges, square panels, or spacing that must stay conservative after orientation changes. Use `vmax` when the longer side should control the result, usually for larger decorative or full-bleed treatments. If the design intent is simply 'follow width', `vw` is still the clearer choice.
How do I convert px to vw?
Divide the pixel value by 1% of the viewport width. If the viewport is 1440px wide, then `1vw` is 14.4px. A 288px element is therefore `288 / 14.4 = 20vw`. The same reverse-conversion rule applies to `vh`, `vmin`, and `vmax`: always divide by the one-unit basis for the relevant viewport dimension.
Are viewport units safe for fluid typography on their own?
Usually not by themselves. Pure viewport-unit typography can ignore user expectations at very small or very large screen sizes, and it can interact poorly with zoom and accessibility needs. A more robust pattern is to use viewport units as one input inside `clamp()`, where minimum and maximum sizes keep the text readable while still allowing fluid scaling between those bounds.
