rem、em 和 px

CSS 中 px、em、rem 三种常见长度单位的基准和使用边界。

#tech / dev / frontend #type / concept #status / growing

[!info] related notes

所属 MOC: 前端基础 MOC

相关概念: flex, grid, css-position

面试问法: rem-em-px-interview-question

rem、em 和 px

这三个单位都常用于 CSS 长度表达，但它们参照的基准不同。

一句话定义

px 是固定像素单位
em 相对当前元素的字体大小
rem 相对根元素的字体大小

三者最核心的区别

`px`

理解最直接
不依赖父级字体大小
适合边框、细粒度尺寸和明确像素值场景

`em`

会受当前元素字体大小影响
发生嵌套时更容易层层放大或缩小
更适合和当前文本上下文强绑定的尺寸

`rem`

统一以根元素为基准
更适合整站级别的尺寸缩放策略
响应式排版中常用

常见误区

以为 rem 和 em 只是写法不同
在深层嵌套里滥用 em，导致尺寸不容易控制
把单位选择只理解成“响应式技巧”，忽略可维护性

最短记忆方式

px 看自己，em 看当前，rem 看根节点。

面试要点

来自 rem-em-px-interview-question 的面试视角整理。

一句话回答

px 是固定像素单位，em 相对当前元素字体大小，rem 相对根元素字体大小。

最稳的回答主线

px 最直接，适合固定尺寸
em 更依赖当前上下文，嵌套时容易连带变化
rem 更适合整站统一缩放和响应式排版

最短记忆方式

px 看自己，em 看当前，rem 看根。