EM → VW Converter
Converting from EM to VW is common when switching from ideal when you need sizing relative to parent elements. to helps in making layouts adapt to screen width. in CSS projects.
Conversion Form
About the Unit
EM: EM is a relative unit that depends on the font size of the parent element in which the current element is inserted. That is, 1em will be equivalent to the font size of the parent element. If the font size of the parent element is 20px, 1em will be equal to 20px. This unit is particularly useful when you want to create dynamic layouts that adjust based on the context of the parent element. For example, using em instead of px ensures that the size of fonts, margins, or other layout elements will scale relative to the text size of the parent component, making the design more flexible and responsive. A key detail about em is that it can accumulate when used in chain (i.e., if a child element uses em to set its size and the parent element also uses em, the value will multiply), which can lead to unexpected results if not used carefully.
Pro Tip: em → vw
Use vw for layouts that adapt to screen size and em for text relative to parent size.
Quick Reference: Unit Conversion by Tens
| EM | VW |
|---|---|
| 10em | 8.333333vw |
| 20em | 16.666667vw |
| 30em | 25vw |
| 40em | 33.333333vw |
| 50em | 41.666667vw |
| 60em | 50vw |
| 70em | 58.333333vw |
| 80em | 66.666667vw |
| 90em | 75vw |
| 100em | 83.333333vw |
| 110em | 91.666667vw |
| 120em | 100vw |
| 130em | 108.333333vw |
| 140em | 116.666667vw |
| 150em | 125vw |
| 160em | 133.333333vw |
| 170em | 141.666667vw |
| 180em | 150vw |
| 190em | 158.333333vw |
| 200em | 166.666667vw |
| 210em | 175vw |
| 220em | 183.333333vw |
| 230em | 191.666667vw |
| 240em | 200vw |
| 250em | 208.333333vw |
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 layouts that adapt to screen size and em for text relative to parent size.
Real Code Example
/* Mobile-first card with em → vw */
.card {
padding: 0em; /* undefinedvw */
font-size: 1.5rem;
width: min(90vw, 40ch);
}Frequently Asked Questions About EM
When should I use em instead of em?
Use em when scaling relative to parent is needed.
How many em is 1em?
Depends on parent font size.
Is em affected by zoom?
Yes, it scales with parent and zoom.
Is em good for fonts?
Yes, especially for nested components.
Keyboard Shortcuts
- Ctrl + C: Convert
- Ctrl + I: Invert units
- Esc: Reset values