Conversion Form

VW
PX

About the Unit

VW (Viewport Width): VW is a relative unit based on the width of the viewport (the visible area of the page in the browser). 1vw corresponds to 1% of the viewport width. This unit is extremely useful when you want to create designs that automatically adjust to the screen width, especially in responsive layouts. Using vw units allows you to set element widths that adapt fluidly to the screen size without the need for complicated media queries. For example, if you set an element's width to 50vw, it will occupy half of the screen width, regardless of the screen size or device resolution. This flexibility makes VW ideal for layouts that need to be adaptable, such as websites that work well on both mobile devices and desktops.

Pro Tip: vw → px

1vw = 1% of the viewport width. On a 1920px screen → 1vw = 19.2px.

Quick Reference: Unit Conversion by Tens

VWPX
10vw192px
20vw384px
30vw576px
40vw768px
50vw960px
60vw1152px
70vw1344px
80vw1536px
90vw1728px
100vw1920px
110vw2112px
120vw2304px
130vw2496px
140vw2688px
150vw2880px
160vw3072px
170vw3264px
180vw3456px
190vw3648px
200vw3840px
210vw4032px
220vw4224px
230vw4416px
240vw4608px
250vw4800px

Live Unit Preview

See how different CSS units affect the size of the box below:

10px

10rem

10em

10%

10vw

10vh

Common Mistake

1vw = 1% of the viewport width. On a 1920px screen → 1vw = 19.2px.

Real Code Example

/* Mobile-first card with vw → px */
.card {
  padding: 0vw;     /* undefinedpx */
  font-size: 1.5rem;
  width: min(90vw, 40ch);
}

Frequently Asked Questions About VW

When should I use vw instead of vw?

Use vw for elements that scale with screen width.

How many vw is 1vw?

1vw = 1% of the viewport width.

Is vw affected by screen size?

Yes, it changes with browser width.

Is vw good for fonts?

Sometimes, but rem is more consistent.

Keyboard Shortcuts

  • Ctrl + C: Convert
  • Ctrl + I: Invert units
  • Esc: Reset values

More popular conversions