CSS 字体与尺寸单位：px、em、rem

内容涵盖概念、计算规则、优缺点、适用场景与最佳实践示例。

参考资料：

• MDN: CSS 值与单位
• MDN: font-size
• MDN: length 单位
• MDN: clamp()

1. 三大单位的核心概念

• px（CSS 像素）

  • 定义：与设备物理像素解耦的“CSS 像素”，受浏览器缩放（zoom）影响，但不受根字号影响。
  • 典型用途：细线边框（例如 1px）、阴影、精准定位、某些图形元素大小。
  • 特点：简单直观；在高 DPI 屏幕下视觉表现稳定；但对“仅调整字体大小”的辅助功能支持较弱。

• em（相对父元素字体大小）

  • 定义：当前元素计算后字体大小的相对单位；1em = 当前元素继承到的 font-size 值。
  • 典型用途：组件内相对字号与间距（使组件随父级字号成比例缩放）。
  • 特点：可组合缩放，易于与组件上下文联动；但嵌套多层时可能“指数级”膨胀（需谨慎）。

• rem（相对根元素字体大小）

  • 定义：相对于文档根元素（html）的字体大小；1rem = html 的 font-size。
  • 典型用途：全局字号体系、页面级间距与栅格、响应式排版基线。
  • 特点：稳定、可控、可与用户默认字体大小协作；避免 em 的嵌套膨胀问题，是现代排版的主力单位。

2. 计算规则与例子

设浏览器默认根字号为 16px（用户可在系统或浏览器中调大/调小）。

• px

  • font-size: 16px → 实际计算值 16px（受浏览器缩放影响，例如 125% 缩放则渲染约 20px）。
  • 与 html 的 font-size 无关。

• rem

  • html { font-size: 16px }
  • font-size: 1rem → 16px
  • margin: 2rem → 32px
  • 若用户将默认字号改为 18px（或你把 html 设置为 18px），则 1rem 即为 18px，全站随根字号线性缩放。

• em

  • article { font-size: 16px }
  • article h2 { font-size: 1.5em } → 24px（相对 article 的 16px）
  • h2 .tag { font-size: 0.875em } → 相对 h2 的 24px，计算结果 21px
  • 注意嵌套层级会连续相对，易导致预期之外的放大/缩小。

简式公式：

• computed_px = value_px
• computed_px = value_em × inherited_font_size_px
• computed_px = value_rem × root_font_size_px

3. 优缺点与适用场景

• px

  • 优点：易用、视觉稳定，适合边框、线条、图标容器。
  • 缺点：对“仅字体大小”调节不敏感；在可访问性场景中不如 rem 友好。
  • 适用：发丝线边框、像素级图形、某些微调场景。

• em

  • 优点：组件相对缩放，随父级字号变化；适合“组件内部一致按比例缩放”的需求。
  • 缺点：嵌套容易指数累积；排查时需知道每一层的上下文字号。
  • 适用：按钮、徽章、输入框等组件内部的图标/内边距与文字同步缩放。

• rem

  • 优点：全局一致基线；支持用户默认字号与可访问性；常用于排版系统与间距。
  • 缺点：在组件内若需要随父级而非根缩放，则不如 em 灵活。
  • 适用：页面与系统级字体、栅格间距、排版基线与响应式尺寸。

4. 与其他常用单位的搭配

• vw/vh（视口宽高百分比）
  • 适合“整屏”或横幅布局、背景图、流式排版上限/下限控制。
  • 在移动端建议结合动态视口单位（dvw/dvh、svw/svh、lvw/lvh）以适配浏览器地址栏显隐。
• %（百分比）
  • 常用于宽度、内/外边距、定位相对于包含块的比例。
• ch（字符宽度）
  • 与字体的“0”的宽度相关，适合设置文本列宽（例如理想行长 60–75ch）。
• clamp(min, preferred, max)
  • 用于流式字号/间距：在 min 与 max 之间基于 vw 或公式动态变化。

示例（流式字号）：

:root { font-size: 100% } /* 保持与用户设置一致，通常 16px */

h1 {
  /* 在 1.5rem 与 3rem 之间随视口宽度（或容器）变化 */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

5. 主流网站的单位选择（2026 实践趋势）

• 字体与基础间距：以 rem 为主
  • 保持与用户根字号联动，满足可访问性与全球站点适配。
  • 设计系统往往定义一套“rem 标尺”（如 0.25rem、0.5rem、1rem、1.5rem、2rem…）。
• 组件内部相对缩放：em 辅助
  • 让图标大小、内边距随组件字体比例缩放，组件在不同上下文保持视觉一致性。
• 边框与细线：px 仍常用
  • 1px 边框在大多数屏幕呈现良好；高 DPR 下如需发丝线，可用 0.5px（有兼容性）或通过缩放技巧模拟。
• 版式与横幅：vw/vh/dvh 等视口单位
  • 结合 clamp() 实现流式字号与模块高度；移动端利用 dvh 适配地址栏动态变化。
• 响应式策略：rem + clamp + 视口单位
  • rem 作为基线，clamp 控上下限，视口单位用于中段变化，既兼顾可访问性又实现灵活布局。

6. 推荐落地策略

• 根字号保持 100%（而非将 html 设为 62.5%）
  • 让 1rem 对齐用户默认值（通常 16px）；避免人为改变用户偏好，提升可访问性。
• 建立 rem 标尺并用 CSS 变量统一管理

:root {
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
}

.card { padding: var(--space-3); margin-bottom: var(--space-4); }

• 组件内部用 em 让图标与内边距随组件字号缩放

.button {
  font-size: 1rem;       /* 组件基准，通常由上层决定 */
  padding: 0.75em 1em;   /* 相对组件字号缩放 */
}
.button .icon { width: 1em; height: 1em; } /* 图标随文本尺寸同步 */

• 细线边框与发丝线处理

.divider { border-top: 1px solid rgba(0,0,0,0.1); }
/* 高 DPR 下更薄的线（兼容性自行评估） */
.hairline { border-bottom: 0.5px solid rgba(0,0,0,0.2); }

• 流式排版与上限控制

h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

7. 常见坑与调试建议

• em 叠加导致“指数膨胀”
  • 深层嵌套时 em 会层层相乘；建议在组件边界用 rem 重置，或控制层级。
• 用 px 指定字体大小影响可访问性
  • 用户仅调整“字体大小”（非页面缩放）时，px 字号可能不随之变化；建议用 rem 为主。
• 根字号“62.5%”技巧的副作用
  • 虽让 1rem ≈ 10px，但会偏离用户默认设置；不利于 a11y 与跨平台一致性，现代实践不再推荐。
• 视口单位在移动端的动态高度问题
  • 地址栏显隐会改变 vh；优先使用 dvh/svh/lvh（现代浏览器广泛支持）或容器查询策略。
• 1px 在高 DPR 下偏粗/偏细
  • 视觉上可能不一致；根据设计要求选择 0.5px、阴影或背景渐变模拟细线。

调试手段：

• DevTools 中查看“计算后样式”（Computed）与字号链路。
• 将根字号临时改为不同值，观察 rem/em 的联动是否符合预期。
• 在不同 DPR、浏览器缩放与移动端场景下，验证边框与流式排版表现。

8. 速查总结

• rem：站点级字号与间距的主力单位，尊重用户默认字号。
• em：组件内部相对缩放的利器，谨慎控制嵌套层级。
• px：用于边框、像素级图形与微调；字体大小不推荐用 px。
• 搭配：rem + clamp() + 视口单位（vw/vh/dvh）实现可访问且灵活的响应式排版。
• 实践：根字号保持 100%；用 CSS 变量管理 rem 标尺；组件内部用 em；细线用 px 或发丝线技巧。