Relative Units
相对单位
Aliases:相对单位相对长度rem 和 em 的区别为什么改浏览器字号界面不变大响应式单位relative unitsrem vs empx vs rem
What is it
A length can be absolute (px) or relative: rem scales from the root font size, em from the element's own font size, % from the container, and vw/vh from the viewport. When a user raises the browser's default font size, px layouts refuse to move while rem-based ones grow with it. Prefer rem for type, spacing and radius; keep px for borders and hairlines.
Interactive playground
Try it. Make an informed choice.Loading lab…
✓ When to use
- Users can change the browser default font size and the UI must scale with it
- One component is reused across containers and font sizes and must adapt
- Fluid type, spacing or full-screen sections that follow the viewport
✕ When not to use
- 1px hairlines and borders that must be exactly one pixel
- Bitmaps aligned to exact source pixels, where any rounding hurts
- Nested em compounding until the size runs away entirely
Variants
Root-relative rem
相对根字号 rem
1rem equals the root size — change it and the page scales together
Local em
相对父级 em
1em follows the current font size and compounds when nested
Viewport units
视口单位 vw/vh
Follows the window — good for full-bleed sections and fluid spacing
Implementation
font-size: 1rempadding: 1.5remwidth: 50vwheight: 100dvhborder: 1px solid var(--color-line)Never hard-set font-size on :root — keep the browser default adjustable. Set body copy in 1rem, and use rem for type and spacing inside components, with ch/rem for max widths. Reserve vw/vh for full-screen sections, and prefer dvh on mobile to dodge the address bar. Keep hairlines and borders at 1px. Use em only where a size must follow the local font size, and watch for nesting compounding.
Platform API
rememvwvhcalc()In code
The exact names this thing goes by in each ecosystem — use the row that matches your project.
| Framework | Name |
|---|---|
| CSS | rem / em Relative to the root and to the parent size |
| CSS | vw / vh / dvh Relative to viewport — dvh handles mobile browser chrome |
| Tailwind CSS | rem-based spacing scale |
Related concepts
A ratio-based set of font sizes that assigns heading and body levels a stable rhythm. Multiply a base body size by a fixed ratio (1.25 major third, 1.333 perfect fourth) to step upward, producing predictable contrast between headings instead of hand-picked pixels. Ship it as sm/md/lg tokens or fluid clamp() steps.
FoundationUsed withA screen counts pixels two ways: physical device pixels and the CSS pixels used for layout. The device pixel ratio, or DPR, is how many device pixels fill one CSS pixel. Phones pack many device pixels into few CSS pixels, so a bitmap shown at its CSS size looks blurry. Serve 2x/3x assets with srcset and vectors to stay sharp; text sharpness comes from glyph rendering, not units — rem only scales relative to the root font size.
FoundationSimilarA fixed ladder of spacing steps (4, 8, 12, 16, 24, 32, 48px, usually multiples of 4 or 8) that all padding, margin and gap values come from. Drawing every gap off one ruler instead of inventing numbers keeps density consistent, and spacing also signals grouping: the larger the gap, the looser the relationship between elements.
FoundationSimilarHow many characters fit on one line — it decides whether the eye can return to the next line without effort. The comfort zone is roughly 45–75 Latin characters (28–40 CJK glyphs), with 65ch the usual target. Too narrow and the eye turns constantly; too wide and it loses the line. Control it with max-width in ch rather than guessing in pixels.
FoundationUsed with