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

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

移动

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

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

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

我来解答赞 8 收藏

反馈

2 条解答

开发者利娇 Lv1

em 这个东西吧，确实坑不少人。你说的情况我太懂了——在组件里用 em 写 padding，结果父级 font-size 一变，整个组件就歪了。

先说原理。em 实际上是相对于当前元素的 font-size，不是父级。假设你有个按钮，font-size 是 14px，你写 padding: 1em，那上下padding 就是 14px。但如果你在这个按钮外面包了一层，而这一层的 font-size 变成了 20px，按钮本身的 font-size 如果没变，padding 还是 14px——em 只看自己的 font-size。

那为什么你会觉得"不同父级下大小不一样"？很可能是因为你组件内部的 font-size 继承了父级的值。比如外层是 20px，里面的小字是 12px，小字下面的 padding: 1em 就是 12px，而大字下面的 padding: 1em 就是 20px。

所以使用规范很简单：

用 rem 的场景：页面整体的布局尺寸、容器宽度、间距。这些需要保持一致，不应该被局部字体影响。比如你的页面主题色间距、卡片宽度、整体布局的 margin。

用 em 的场景：组件内部需要跟随字体大小变化的尺寸。比如按钮的 padding、段落的行高、胶囊按钮的内边距。这样当用户调整字体大小时，组件会成比例缩放，不会出现文字变大了但按钮还是那么小的情况。

还有个关键点，如果你的组件可能被嵌套在不同的父级下，而且父级的 font-size 不确定，那组件内部最好用 rem 固定值，或者把组件根元素的 font-size 用 rem 固定住。比如：

.btn {

  font-size: 1rem;  /* 固定为根元素的 16px */

  padding: 0.5em 1em;  /* 这样 padding 就是 8px 16px，不会受父级影响 */

}

或者更干脆的做法——组件内部全部用 rem，布局间距用 rem，字体用 rem，只在极少数需要随字体缩放的局部用 em。这是我比较推荐的做法，清晰不容易乱。

你要是实在不想记这些规矩，还有一个偷懒方案——全部用 rem 就完事了。响应式布局里 rem 足够用，局部缩放的问题通过媒体查询调根元素的 font-size 来解决，虽然粗糙一点但绝对不会出错。

2026-03-18 19:21

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