Conversion Form

VW
CH

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 → ch

Use vw for layout width and ch for text width relative to the font.

Quick Reference: Unit Conversion by Tens

VWCH
10vw3.84ch
20vw7.68ch
30vw11.52ch
40vw15.36ch
50vw19.2ch
60vw23.04ch
70vw26.88ch
80vw30.72ch
90vw34.56ch
100vw38.4ch
110vw42.24ch
120vw46.08ch
130vw49.92ch
140vw53.76ch
150vw57.6ch
160vw61.44ch
170vw65.28ch
180vw69.12ch
190vw72.96ch
200vw76.8ch
210vw80.64ch
220vw84.48ch
230vw88.32ch
240vw92.16ch
250vw96ch

Live Unit Preview

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

10px

10rem

10em

10%

10vw

10vh

Common Mistake

Use vw for fluid layouts, ch for widths relative to the font size.

Real Code Example

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