font-size单位： rem vs em vs px

2026-02-26 08:59:24

简要对比

单位	定义 / 参考基准	典型用途	特点
px	固定像素值，与设备屏幕像素直接对应。	需要绝对精确控制尺寸的场景，如边框、1像素线。	1. 固定大小，不随其他元素变化。 2. 在高分辨率屏幕上可能很小，但浏览器通常会自动做缩放处理。
em	相对于当前元素的 `font-size` 计算。	相对父元素文本大小进行比例缩放。	1. 继承性：多层嵌套时，每一层 `em` 都基于上一层的 `font-size` 计算，容易产生复合效果。 2. 适用于组件内部局部适配。
rem	相对于根元素（html）的 `font-size` 计算。	全局比例缩放，实现响应式布局。	1. 一致性：所有 `rem` 单位都基于同一个根字体大小，避免嵌套问题。 2. 结合媒体查询调整 `html` 的 `font-size` 可整体控制页面缩放。

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

嵌套示例：

div { font-size: 20px; padding: 1.5em; } /* padding = 30px */
div p { font-size: 0.8em; } /* p的font-size = 20px × 0.8 = 16px */

rem（相对根元素字体大小）
- 默认 html { font-size: 16px; }，则 1rem = 16px。
- 可通过修改根字体实现整体缩放：
```
html { font-size: 62.5%; } /* 1rem ≈ 10px，方便计算 */
.box { width: 20rem; } /* 宽度 ≈ 200px */
```

注意：