em 和 rem 到底差在哪，改字号为什么会翻倍？

4 个讲解板块 · 关联 3 款站内工具 · 内容最后核对 2026-10-09

em 参照父元素字号、多层嵌套会连乘，rem 只参照根元素、写在哪儿都一样。

直接答案

差别只有一个字：参照物。em 看的是「这里当前的字号是多少」，对字号属性本身来说就是父元素的字号，对内外边距这类属性来说则是元素自身的字号；而 rem 永远看根元素的字号。因为参照物会随层级变化，em 就会连乘：三层都写一点二倍，最终是一点二的三次方，也就是 1.728 倍，而不是一点二倍。

这个性质决定了它们各自的主场。em 适合组件内部的相对比例，比如按钮的内边距，按钮字号一变，内边距跟着等比变化，只改一个值就能整体缩放。rem 适合控制页面尺度，比如标题字号、区块间距、容器宽度，无论元素嵌得多深，一点五 rem 永远是同一个尺寸，不会因为某层容器改了字号而意外变小。

不少人有过这样的经历：给列表项写了字号，结果第三层嵌套的文字小到看不清。这不是浏览器出了错，而是 em 在按层级连乘，每一层都把上一层的缩小幅度又缩了一次。

理解这件事只需要记住两个参照点：em 参照就近的父级，rem 参照根节点。剩下的所有差异都是这一条推出来的。

三个单位放在一起比，差别立刻显形。

单位	参照物	嵌套是否连乘	是否随用户设置字号变化
em	父元素字号（字号属性）/ 自身字号（其他属性）	会连乘	会
rem	根元素字号，全页面统一	不会	会
px	固定像素，无参照	不会	不会，这是它最大的缺点

把根元素字号设成百分数而不是固定像素，用户的字号偏好才能继续生效。设成固定像素会屏蔽掉这项无障碍设置。

用一组数字把这件抽象的事变具体。

这一条反转了很多人的直觉。

媒体查询不看你设的根字号: 规范规定媒体查询里的相对单位按字号初始值解析，所以你把根字号设小、写了四十个 rem 的断点，断点仍按默认字号换算，也就是 640 像素。
不要在媒体查询里做单位换算: 想精确控制断点位置，直接写像素或用明确的比例，不要指望靠改根字号来挪动断点。
被查询的样式里则照常生效: 断点条件内的规则仍按正常规则解析单位，两者别搞混。

不用纠结谁更好，按场景分工最省心。

要页面尺度统一，用 rem: 标题、正文、块间距、容器最大宽度，这些都属于页面级别的尺度。
要组件内部等比缩放，用 em: 按钮或标签的内边距、图标与文字的间距，跟着组件自身字号走更自然。
要绝对不变，用像素: 一像素的边框、阴影偏移、极小的圆角，这些不该随字号变化。
换算时记住十六这个基数: 默认根字号是十六像素，零点八七五 rem 是十四像素，一点五 rem 是二十四像素；想改成十进制心智模型可以设根字号为六成二五，但记得媒体查询不受影响。