rem 和 em 到底该怎么用才不会乱？

欧阳恩希提问于 2026-03-05 12:04:19 阅读 8

移动

我最近在做移动端页面，想用 rem 做响应式布局，但发现字体和间距老是对不齐。

我在根元素设了 font-size: 16px，然后组件里用 em 写 padding，结果不同父级下大小完全不一样，是不是 em 不能随便用？

试过统一用 rem，但有些局部缩放又显得太死板。有没有推荐的使用规范？比如什么场景用 rem，什么用 em？

我来解答赞 1 收藏

反馈

1 条解答

UX乐萱 Lv1

哎这个我太有感触了，之前也被 rem 和 em 折磨得够呛。可以试试这样来区分：

1. 全局缩放用 rem：在 html 标签设 font-size，比如 html { font-size: 16px }，然后其他尺寸都用 rem。这样整个页面会跟着根字号等比缩放，做响应式很方便。

2. 局部相对尺寸用 em：比如按钮内部的图标和文字间距，或者某个组件内部的 padding。记住 em 是相对于当前元素的 font-size，所以最好给父元素明确设置 font-size，不然会继承到不确定的值。比如：

.card {

  font-size: 1rem; /* 明确设置 */

  padding: 1em; /* 这时 1em=16px */

}



.card-title {

  font-size: 1.2em; /* 1.2×16px=19.2px */

  margin-bottom: 0.5em; /* 0.5×19.2px=9.6px */

}

3. 简单经验法则：
- 涉及整体布局的（宽度、边距）用 rem
- 组件内部细节（padding、行高）用 em
- 字体大小建议都用 rem 保持统一

我之前踩的坑就是在一个没设 font-size 的 div 里用 em，结果发现 padding 忽大忽小，最后发现是继承了浏览器默认字号...现在都会习惯性先写 font-size 再玩 em。

2026-03-05 13:07