PX to VW Converter (Pixels to VW)

Pixels to VW

Pixels (px) to viewport width units (vw) for any viewport width.

Value

Convert to

3.33333vw

Viewport width (px)

Precision (significant figures)

Formula

vw = px × 100 ÷ viewport width

1 px = 0.0694444 vw in a 1440 px wide viewport

Px to vw chart

Values in viewport width units for common viewport widths: phone, tablet, laptop and desktop.

Pixels (px)	375vw at 375 px wide	768vw at 768 px wide	1440vw at 1440 px wide	1920vw at 1920 px wide
1	0.266667	0.130208	0.0694444	0.0520833
10	2.66667	1.30208	0.694444	0.520833
16	4.26667	2.08333	1.11111	0.833333
24	6.4	3.125	1.66667	1.25
32	8.53333	4.16667	2.22222	1.66667
48	12.8	6.25	3.33333	2.5
64	17.0667	8.33333	4.44444	3.33333
100	26.6667	13.0208	6.94444	5.20833
200	53.3333	26.0417	13.8889	10.4167
320	85.3333	41.6667	22.2222	16.6667
375	100	48.8281	26.0417	19.5312
500	133.333	65.1042	34.7222	26.0417
768	204.8	100	53.3333	40
1,024	273.067	133.333	71.1111	53.3333
1,280	341.333	166.667	88.8889	66.6667
1,440	384	187.5	100	75

When you need this conversion

Turning a fixed design into a fluid one. A hero headline that is 72 px on a 1440 px mockup should shrink smoothly on smaller screens; expressing it in vw (5vw) makes it scale with the window. Designers also use vw to size full-bleed images, gaps and grids that should keep their proportions.

Pick the right viewport width

Convert against the width your design was drawn at. Common artboards are 375 px (phone), 768 px (tablet), 1440 px (laptop and desktop) and 1920 px (large desktop). The same 48 px element is:

12.8vw at 375 px
6.25vw at 768 px
3.33vw at 1440 px

Fluid type done right

Viewport-only font sizes break zoom: pressing Ctrl + doesn’t enlarge them. Accessibility guidelines expect text to scale to 200%, so mix vw with rem and cap it: font-size: clamp(1.25rem, 0.75rem + 2vw, 3rem);. The vw part gives the fluid growth; the rem parts keep zoom working and set sensible limits.

Common mistakes

Using vw for body text. It becomes tiny on phones and huge on wide monitors.

Forgetting the scrollbar. width: 100vw includes the scrollbar on Windows, so it can overflow by 15–17 px. Use width: 100% for full-width blocks.

Going the other way? Use vw to pixels.

Questions

What is 1 vw?

1% of the viewport (browser window) width. On a 1440 px wide window, 1vw is 14.4 px.

How do I convert px to vw?

Divide the pixel value by the viewport width and multiply by 100. For 48 px on a 1440 px design: 48 × 100 ÷ 1440 = 3.33vw.

Should I use vw for font sizes?

Not on its own. Pure vw text doesn't respond to browser zoom the way users expect. Combine it with rem, for example font-size: clamp(1rem, 0.5rem + 2vw, 2rem).

Does vw include the scrollbar?

Yes. 100vw is the full window width including a classic scrollbar, which can cause a small horizontal overflow on desktop.