CSS Units Demystified: When to Use px, rem, em, vw, and vh

CSS 单位多到让人抓狂。px, rem, em, vw, vh... 到底什么时候用哪个？

As someone who transitioned from design to frontend development, CSS units confused me for months. Now I use them instinctively. Here's the decision framework.

The Units at a Glance

Unit	Type	Relative To	Best For
px	Absolute	Nothing (fixed)	Borders, shadows, fine details
rem	Relative	Root font size	Typography, spacing
em	Relative	Parent font size	Component-local scaling
vw	Viewport	1% of viewport width	Hero sections, fluid type
vh	Viewport	1% of viewport height	Full-screen sections
%	Relative	Parent element	Layouts, responsive widths
ch	Relative	Width of "0"	Text column widths

My Decision Framework

Typography → rem

html { font-size: 16px; }

h1 { font-size: 2.5rem; }  /* 40px — scales with root */
p  { font-size: 1rem; }    /* 16px — always readable */
small { font-size: 0.875rem; } /* 14px */

Why rem? Users can change their browser's default font size. rem respects that preference. px doesn't.

Spacing → rem

.card {
  padding: 1.5rem;   /* 24px */
  margin-bottom: 2rem; /* 32px */
  gap: 1rem;         /* 16px */
}

Why rem? Consistent spacing that scales with user preferences.

Component-Local Sizing → em

.button {
  padding: 0.5em 1em;  /* Relative to button's own font-size */
  font-size: 1rem;
}

.button--large {
  font-size: 1.25rem;  /* padding automatically scales! */
}

Why em? Padding scales proportionally when you change font-size.

Responsive Layouts → vw/vh

.hero {
  height: 100vh;        /* Full viewport height */
  padding: 5vw;         /* Scales with viewport width */
}

.fluid-heading {
  font-size: clamp(1.5rem, 4vw, 3rem);  /* Fluid typography */
}

Why vw/vh? Creates layouts that adapt without media queries.

Text Columns → ch

.article-body {
  max-width: 65ch;  /* ~65 characters per line — optimal readability */
}

Why ch? The optimal line length for readability is 45-75 characters. 65ch guarantees it.

Common Mistakes

1. Using px for font-size — Breaks accessibility. Use rem.
2. Using em for spacing — Compounds when nested. Use rem.
3. Using vh on mobile — 100vh includes the browser toolbar. Use dvh (dynamic viewport height).
4. Using % for height — Parent must have explicit height. Otherwise it collapses.

The Golden Rules

• Font sizes: rem (always)
• Spacing: rem (mostly) or em (component-local)
• Layout widths: % or vw
• Layout heights: auto (let content decide) or vh/dvh
• Borders: px (1px borders should always be 1px)
• Media queries: em (for typography breakpoints)

Calculate perfect aspect ratios and responsive dimensions with our free Aspect Ratio Calculator — essential for responsive CSS layouts.