px、em、rem、vw/vh 的区别？如何选择？
单位对比
| 单位 |
相对于 |
特点 |
px |
绝对像素 |
固定不变，不随用户设置缩放 |
em |
父元素字体大小 |
嵌套时会累积 |
rem |
根元素（html）字体大小 |
全局统一，不会累积 |
vw |
视口宽度的 1% |
随窗口变化 |
vh |
视口高度的 1% |
随窗口变化 |
% |
父元素对应属性 |
相对父元素 |
vmin |
vw 和 vh 中较小的 |
取小值 |
vmax |
vw 和 vh 中较大的 |
取大值 |
em 的累积问题
.parent { font-size: 20px; }
.child { font-size: 1.2em; }
.grandchild { font-size: 1.2em; }
rem 优势
html { font-size: 16px; }
h1 { font-size: 2rem; }
p { font-size: 1rem; }
.small { font-size: 0.875rem; }
所有 rem 都相对 html 的 font-size，修改一处即可全局缩放。
响应式根字号
@media (max-width: 768px) {
html { font-size: 14px; }
}
html {
font-size: calc(14px + 0.4vw);
}
html {
font-size: clamp(14px, 2vw, 18px);
}
选择建议
| 场景 |
推荐单位 |
| 字体大小 |
rem（统一缩放） |
| 间距/边距 |
rem 或 px |
| 容器宽度 |
% 或 vw |
| 全屏高度 |
vh 或 dvh |
| 响应式字体 |
clamp() |
| 边框 |
px |
| 图标大小 |
em（跟随文字大小） |
注意事项
- 用户可能在浏览器设置中修改默认字号，使用
rem 可以尊重用户设置
vh 在移动端有 100vh 问题（地址栏伸缩），建议用 dvh（dynamic viewport height）px 不会随用户缩放变化，无障碍性较差
同分类其他题目