CSS 的 px、em、rem、vw、vh 有什么区别？响应式布局怎么选单位？

下面是一段教学用的模拟面试。

🧑‍💻 面试官：em 和 rem 分别相对什么？

🙋‍♂️ 我：em 相对父元素，rem 相对根元素。

🧑‍💻 面试官：子元素字号是 30px，padding 写 1em，父元素字号是 20px。padding 是 20 还是 30？

🙋‍♂️ 我：应该还得看 em 写在什么属性上。

🧑‍💻 面试官：那手机页面写 height: 100vh，为什么地址栏出来以后，底部按钮有时还是看不到？

相对单位要问两件事：「相对谁」和「写在哪个属性上」。尺寸能跟着变化，不代表变化方向就符合你的需求。

面试速答（60 秒版）

px 是 CSS 像素，不必等于一个设备物理像素。em 与字号有关：用于 font-size 时，按继承的字号计算；用于 padding 等属性时，通常按元素自身字号计算。rem 则按根元素字号计算。

vw、vh 按视口宽高的百分之一计算，适合表达与屏幕相关的尺寸，但移动端还需要区分小、大和动态视口，比如 svh、lvh、dvh。

因此，选单位不是全站统一替换。希望跟随文字的间距可以用 em，整体字号尺度可以用 rem，与屏幕相关的区域再考虑视口单位。正文大小还应设合理上下限，避免纯 vw 字号在小屏过小、大屏过大，并检查浏览器缩放和字体设置。

Q283 面试速答总览：CSS px 与设备像素区分；em 用于字号看继承，用于 padding 看自身；rem 根字号。

知识点详解：同一个 1em，为什么能算出不同结果？

px 是 CSS 尺度，不是硬件像素编号

咱们先看一个宽 100px 的按钮。这表示它在 CSS 坐标里宽 100 个像素。

高像素密度屏幕、浏览器缩放等因素，会影响它最终对应多少设备像素。所以“1px 永远对应一个物理像素”不成立。px 的尺寸不依赖父元素字号，但也不能说它在任何设备、任何缩放下视觉大小都绝对相同。

em 的参照，要结合属性判断

假设根字号 16px，父元素字号 20px，子元素写成下面这样：

html { font-size: 16px; }
.parent { font-size: 20px; }
.child {
  font-size: 1.5em;
  padding: 1em;
  margin-bottom: 2rem;
}

子元素的 font-size 用继承来的 20px 计算，得到 30px。随后 padding 的 1em 根据子元素自身的 30px 计算，所以也是 30px。margin-bottom 的 2rem 根据根字号计算，得到 32px。

因此，“em 永远相对父元素”只记对了部分情形。在字号属性和其他常见属性里，它的计算参照不一样。

这也解释了为什么 em 适合按钮内部留白：按钮字号变大，留白一起增大。但是嵌套层级中反复用 em 放大字号，尺寸可能逐层累积，要确认这是不是你需要的效果。

rem 不随着中间父元素字号变化。不过，根字号也不是永远 16px；那只是这里明确设置的实验条件，浏览器默认值和用户设置都需要另看。

Q283 知识点示意：1.5×20=30，1×30=30，根16时2rem=32，计算条件完整。

vh 处理的是哪一种视口？

手机浏览器的地址栏、工具栏展开与收起时，可见区域会变化。历史上的 100vh 并不总等于此刻没有被浏览器界面遮挡的可见高度。

现代 CSS 提供了三组更明确的参照：svh 对应小视口，lvh 对应大视口，dvh 对应当前动态视口。需要区域跟随可见视口变化，可以考虑 100dvh；需要高度稳定，又不想在浏览器界面展开时溢出，可以结合 svh 评估。

但 dvh 变化也可能带来布局调整，不是无条件更好的替换。弹出的软键盘、嵌入页面和不同浏览器的行为还要实际检查。全屏区域也常用 min-height，而不是固定 height，避免内容一多就被裁掉。

Q283 知识点示意：100svh/100lvh/100dvh 区分，动态视口测量跨完整内容视口；无伪造设备数值。

响应式布局不靠某一个单位包办

页面宽度可以通过百分比、Flex、Grid 和 max-width 组织，文字可以使用 rem，并用 clamp 限制流式字号：

.page {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}
.title {
  font-size: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

这表示标题可以随屏幕变化，但不会低于或高于设定范围。它仍然需要在常见屏幕、放大文字、长标题和缩放后检查，不能因为用了 clamp 就认为无障碍已经合格。

单位定义依据 MDN CSS length 核验。

面试官继续追问

全部使用 rem，是不是就能完成移动端适配？

不能。它只提供根字号尺度，布局断点、内容溢出、触控区域和视口变化仍需设计。也不要任意改根字号，把用户希望放大的文字强制缩回去。

vw 字号为什么不适合直接用于所有正文？

纯粹依赖视口宽度，可能让极窄屏文字过小，而且不一定充分响应用户字体需求。可以结合 rem 和上下限，再实际测试可读性。

面试速记卡

px：CSS 像素，不必等于设备物理像素。

em：字号属性看继承字号，padding 等常见属性看自身字号。

rem：看根字号，根字号不一定永远是 16px。

视口单位：vw/vh 表示视口比例，移动端区分 svh、lvh、dvh。

选型：按尺寸需要跟随谁变化来决定，不做全站机械替换。