Viewport Unit Calculator

Convert

Direction

Pixels

Viewport width

Viewport height

vmin = 900px · vmax = 1440px. Mobile browsers change vh as the address bar shows and hides; dvh, svh and lvh are the steadier versions.

Result

48px on 1440 × 900 = · click a card to copy it

Common sizes on a 1440 by 900 viewport
vw	vh	vmin
0.8333vw	1.3333vh	1.3333vmin
0.9722vw	1.5556vh	1.5556vmin
1.1111vw	1.7778vh	1.7778vmin
1.25vw	2vh	2vmin
1.3889vw	2.2222vh	2.2222vmin
1.6667vw	2.6667vh	2.6667vmin
2.2222vw	3.5556vh	3.5556vmin
2.7778vw	4.4444vh	4.4444vmin
3.3333vw	5.3333vh	5.3333vmin
4.4444vw	7.1111vh	7.1111vmin
5.5556vw	8.8889vh	8.8889vmin
6.6667vw	10.6667vh	10.6667vmin
8.8889vw	14.2222vh	14.2222vmin
11.1111vw	17.7778vh	17.7778vmin
16.6667vw	26.6667vh	26.6667vmin
22.2222vw	35.5556vh	35.5556vmin

About this tool

Convert pixels to vw, vh, vmin, vmax — and back — at any viewport size, with device presets and a fluid-typography reference table.

Why use viewport units?

📐

Truly fluid layouts

Viewport units scale with the screen — no media queries needed for proportional spacing or typography. A single rule like `font-size: 5vw` adapts smoothly from phone to ultrawide.

🎯

Hero sections that fill the screen

min-height: 100vh on a hero, height: 100dvh for mobile-safe full-bleed layouts, and 100svh for the visible-area variant — all built around the viewport, not arbitrary pixel guesses.

🔠

Fluid typography

Pair viewport units with clamp() to build type that grows and shrinks without ugly breakpoint jumps: clamp(1rem, 2.5vw, 2rem) — fluid between two safe limits.

🧩

Less CSS, more flexibility

Replace dozens of lines of @media rules with a couple of viewport-unit declarations. Designs that previously needed five breakpoints often need none.

▶

How to use this calculator

Pick a direction

Convert pixels to viewport units (great for replacing fixed sizes with fluid ones), or convert viewport units back to pixels (handy when QA reports a "10vw is too big" problem on a specific device).

Set the viewport size

Type a custom width × height, or pick a preset (iPhone, iPad, laptop, desktop). vmin and vmax update automatically based on the smaller / larger side.

Read the result

PX → VU shows all four units (vw, vh, vmin, vmax) at once. VU → PX shows the resolved pixel value plus the formula. Click any unit card to copy.

Use the lookup table

The bottom panel lists common px values converted in real time. Click a row to load it as the active value, then copy the unit you need.

⇄

Viewport unit reference

Unit	What it means	1440 × 900	390 × 844
`1vw`	`1% of viewport width`	`14.4 px`	`3.9 px`
`1vh`	`1% of viewport height`	`9 px`	`8.44 px`
`1vmin`	`1% of smaller viewport side`	`9 px`	`3.9 px`
`1vmax`	`1% of larger viewport side`	`14.4 px`	`8.44 px`
`1svh`	`1% of small viewport height (mobile, URL bar visible)`	`9 px`	`~7.5 px`
`1lvh`	`1% of large viewport height (mobile, URL bar hidden)`	`9 px`	`~8.44 px`
`1dvh`	`1% of dynamic viewport height (current state)`	`9 px`	`~7.5–8.4 px`

Viewport patterns

Fluid type

/* Fluid heading without media queries */
h1 {
  font-size: clamp(1.75rem, 4vw + 1rem, 4rem);
  line-height: 1.1;
}

Full hero

/* Mobile-safe full-screen hero */
.hero {
  min-height: 100dvh;        /* dynamic viewport — mobile-friendly */
  display: grid;
  place-items: center;
  padding: clamp(1rem, 5vw, 4rem);
}

Aspect

/* Square that scales with the viewport */
.thumb {
  width:  clamp(120px, 20vw, 280px);
  aspect-ratio: 1 / 1;
  border-radius: 1.5vw;
}

✦

Pro tips

Use dvh, not vh, for mobile heroes

On iOS Safari, 100vh includes the URL bar even when it's visible — content gets cut off. 100dvh tracks the current visible area, fixing the classic "scrolling hero" bug.

Combine with clamp() always

Raw viewport units have no floor or ceiling — `font-size: 5vw` becomes 96px on a 1920 monitor. Wrap in clamp(min, fluid, max) so the design stays usable at every size.

Avoid vw on body padding

`padding: 5vw` looks fine on phones and laptops but explodes on ultrawides. Use clamp() or pair vw with a max-width container so layouts don't stretch indefinitely.

Mind horizontal scroll

Setting width: 100vw can overflow when a vertical scrollbar is present (vw includes the scrollbar width on most desktops). Prefer width: 100% on body and main containers.