Rem 和 em的区别？｜阿里巴巴前端面经解析

60 秒回答模板

em 是相对于当前上下文字体大小的单位，常用于组件内部按字体比例缩放，比如按钮 padding、图标间距、首行缩进等；但它会受到父级 font-size 继承和自身 font-size 叠加的影响。rem 是 root em，固定相对于 html 元素的 font-size，不受组件嵌套层级影响，更适合做全局尺寸体系、移动端适配和页面级布局。简单说，em 更偏局部、语义化和组件内比例关系，rem 更偏全局、稳定和统一缩放。

考点 核心定义

主线 em 的计算方式

易错点 只回答 em 相对父元素、rem 相对根元素，忽略 e…

深入解析

核心定义

em 和 rem 都不是固定像素单位，而是相对单位。em 的计算基准来自当前元素的 font-size；如果当前元素没有显式设置 font-size，就会使用继承后的字体大小。rem 的全称是 root em，它的计算基准固定为根元素 html 的 font-size。因此同样写 2em 和 2rem，在不同层级、不同字体继承关系下，最终像素值可能完全不同。

em 的计算方式

em 在 font-size 属性上使用时，通常相对于父元素的 font-size；在 width、height、padding、margin、line-height 等属性上使用时，通常相对于当前元素计算后的 font-size。这个细节很容易被忽略。例如父元素 font-size 是 20px，子元素 font-size: 1.2em，则子元素字体为 24px；如果子元素 padding: 1em，则 padding 会按子元素自身 24px 来计算。

rem 的计算方式

rem 的计算逻辑更稳定，因为它始终只看 html 的 font-size。假设 html 设置为 16px，那么 1rem 就是 16px，2rem 就是 32px；无论元素嵌套多深，只要根字号不变，rem 的结果都不变。这使 rem 特别适合建立统一的尺寸系统，例如页面间距、容器宽度、字号层级、响应式断点下的整体缩放等。

继承与叠加

em 最大的特点也是风险点：它会随上下文变化。如果多个嵌套元素都设置 font-size: 1.2em，那么字号会逐级放大，形成复合计算；如果设置 0.8em，也可能逐级缩小。这种特性在组件内部很有用，但如果用于页面整体布局，容易出现尺寸不可控。rem 避免了这种层级叠加问题，因为它不关心父元素字号。

使用场景

em 更适合表达局部比例关系，例如按钮文字变大时，按钮内边距也跟着变大；标题旁的小图标希望跟随标题字号缩放；文本段落首行缩进希望等于两个字符宽度。rem 更适合全局一致的设计体系，例如移动端适配、统一字号阶梯、页面级间距、栅格布局和响应式缩放。两者不是替代关系，而是作用范围不同。

移动端适配

在移动端适配中，rem 常被用来配合动态设置 html font-size，根据视口宽度换算页面尺寸。这样设计稿中的尺寸可以按比例映射到不同屏幕上。不过现代项目还会结合 vw、媒体查询、CSS clamp、设计 token 等方案。回答时可以说明 rem 适合整体缩放，但不应把所有尺寸都机械地 rem 化，文本可读性和最大最小边界也需要控制。

可维护性差异

从维护角度看，rem 的好处是全局统一、可预测，团队成员容易推导最终尺寸；em 的好处是组件自适应能力强，组件字号变化时内部间距可以自然联动。但 em 需要更谨慎地管理继承关系，否则嵌套组件、局部 font-size 修改、第三方组件样式覆盖都可能导致尺寸偏差。实际工程中常见做法是全局尺寸用 rem，组件内部细节用 em。

易错点

只回答 em 相对父元素、rem 相对根元素，忽略 em 在不同属性上的计算差异。
误以为 rem 天然响应式，其实 rem 是否响应屏幕取决于 html font-size 是否变化。
把 em 和 rem 当成 px 的机械替代品，没有说明它们表达的是相对缩放关系。
忽略 em 多层嵌套会产生复合计算，导致字号和间距逐级放大或缩小。
认为项目中应该统一只用 rem，忽视 em 在组件内部比例控制上的价值。
没有区分全局布局尺寸和局部组件尺寸，导致回答缺少工程实践层面的取舍。

面试官追问

1em 一定等于父元素的 font-size 吗？

不一定。em 用在 font-size 属性上时，通常相对于父元素的 font-size 计算；但用在 padding、margin、width、height 等其他属性上时，通常相对于当前元素计算后的 font-size。因此不能简单说 1em 永远等于父元素字号，要结合具体 CSS 属性判断。

rem 为什么更适合移动端适配？

因为 rem 的基准固定为 html 的 font-size，只要根据屏幕宽度动态调整根字号，页面中使用 rem 的尺寸就可以整体等比缩放。相比 em，rem 不会受组件嵌套影响，计算链路更短，也更适合把设计稿尺寸映射成统一的响应式尺寸体系。

em 有哪些容易踩坑的地方？

em 最大的坑是继承和叠加导致最终尺寸难以直观看出。例如父子孙元素都设置 font-size: 1.2em，字号会逐级放大，而不是每层只增加固定值。组件嵌套很深或局部字号被覆盖时，em 计算结果可能偏离预期。

实际项目中应该全部使用 rem 吗？

不应该。rem 适合全局尺寸和整体缩放，但不是所有地方都优于 px 或 em。组件内部希望跟随文字变化的间距适合 em，1px 边框、图标精确对齐、阴影细节等可能使用 px 更直接。关键是根据尺寸语义选择单位。

rem 和 vw 的区别是什么？

rem 相对于 html 的 font-size，是否随视口变化取决于根字号是否被动态设置；vw 直接相对于视口宽度，1vw 等于视口宽度的 1%。vw 更直接响应屏幕变化，rem 更适合设计系统中的统一比例控制，二者也可以结合使用。