Conversion Form

VW
REM

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: vwrem

Convert vw to rem for consistent text sizing and viewport-relative layouts.

Quick Reference: Unit Conversion by Tens

VWREM
10vw1.92rem
20vw3.84rem
30vw5.76rem
40vw7.68rem
50vw9.6rem
60vw11.52rem
70vw13.44rem
80vw15.36rem
90vw17.28rem
100vw19.2rem
110vw21.12rem
120vw23.04rem
130vw24.96rem
140vw26.88rem
150vw28.8rem
160vw30.72rem
170vw32.64rem
180vw34.56rem
190vw36.48rem
200vw38.4rem
210vw40.32rem
220vw42.24rem
230vw44.16rem
240vw46.08rem
250vw48rem

Live Unit Preview

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

10px

10rem

10em

10%

10vw

10vh

Common Mistake

Convert vw to rem for consistent text sizing and viewport-relative layouts.

Real Code Example

/* Mobile-first card with vw → rem */
.card {
  padding: 0vw;     /* undefinedrem */
  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