CSS Units and Mobile Responsive Design: px, em, rem, vw, vh
Published April 24, 2026
Web designers juggle px (pixels), em (relative to font-size), rem (relative to root), vw (viewport width), and vh (viewport height)—each with different behaviors on mobile vs. desktop. Responsive design fails when unit conversions are misunderstood. A 16px base on desktop becomes 12px on mobile, cascading errors through em-based layouts.
Table of Contents
Understanding the Basics
CSS unit conversions are context-dependent: 1 em = 16 px only if the parent font-size is 16px (the browser default). Nested divs multiply conversions: if parent is 20px and child is 1.5em, the child is 30px—but if grandparent changes to 14px, the whole tree recalculates. em-based scaling breaks easily; rem (root em) was invented to avoid this.
Viewport units (vw, vh) scale with screen size: 1 vw = 1% of viewport width. On a 1920px desktop, 100vw = 1920px; on a 375px phone, 100vw = 375px. This enables true responsive sizing without media queries—but misuse creates horizontal overflow and unreadable text at extreme sizes. Testing across devices is essential.
CSS Unit Types
- Pixels (px): Fixed unit. 1 px = 1 screen pixel (except on high-DPI displays). Non-responsive.
- Em (em): Relative to parent element font-size. 1 em = parent font-size. Cascades; can compound quickly.
- Rem (rem): Relative to root (html) font-size. Consistent across nested elements. Modern standard for responsive layouts.
- Viewport Width/Height (vw, vh): 1 vw = 1% of viewport width; 1 vh = 1% of viewport height. Responsive to screen size.
- Percentage (%): Relative to parent element dimensions. Context-dependent (width % ≠ font-size %).
Conversion Table
| from | to | factor |
|---|---|---|
| px | em | ÷ parent font-size |
| em | px | × parent font-size |
| rem | px | × root (html) font-size (usually 16px) |
| vw | px | × (viewport width ÷ 100) |
Worked Examples
Em Nesting Pitfall
Parent: 20px; child: 1.5em = 30px; grandchild: 1.5em = 45px. Three levels of nesting multiply the effect. Solution: use rem for all sizes tied to root, not parent.
Responsive Viewport Unit
Desktop (1920px): width: 50vw = 960px. Mobile (375px): width: 50vw = 187.5px. Auto-responsive without media query—but text at 50vw becomes unreadable on small screens.
Practical Applications
Typography: Set base font-size in html (rem = 16px); all other text in rem. Avoids em cascading errors.
Container queries: Use em/rem for text scaling; vw/vh for screen-aware layout (but with caution).
Mobile-first design: Start with base 16px; use media queries to increase base to 18px on desktop (single change ripples through rem-based design).
High-DPI displays: Pixel ratios (1.5x, 2x) affect px rendering; rem-based sizing auto-scales better.
Best Practices
💡 Use rem for all font sizes and scalable dimensions. Keep the root html font-size at 16px (or document it clearly). Avoid em except for icon scaling.
Use rem for all font sizes and scalable dimensions. Keep the root html font-size at 16px (or document it clearly). Avoid em except for icon scaling.
Common Mistakes
⚠️ Mixing px, em, rem, and vw in the same component breaks responsive design. Pick one
rem for most layouts, vw cautiously for screen-aware sizes, px only for borders/decorative elements.
Tools and Resources
- Browser DevTools: Inspect computed styles to see actual px values of em/rem/vw.
- Online converter: Input em, see px equivalent for a given parent font-size.
- Responsive design tester: Test layouts at 320px, 768px, 1920px to catch unit conversion errors.
Key Takeaways
- px = fixed; em = relative to parent; rem = relative to root; vw = relative to viewport.
- Use rem for responsive layouts; avoids em cascading pitfalls.
- 1 em = parent font-size; 1 rem = root font-size (usually 16px default).
- Viewport units (vw/vh) are powerful for responsive design but can cause overflow if over-used.
- Test layouts at multiple screen sizes (mobile 375px, tablet 768px, desktop 1920px) to catch conversion errors.