响应式布局怎么做？px、em、rem、vw 怎么选？

详细解析#

各单位的参照物#

em 会层层叠加：父元素 1.2em、子元素再 1.2em，子元素字号就是根字号的 1.44 倍。需要稳定的全局比例时用 rem。

移动端整体适配：rem 方案和 vw 方案#

两种方案的目标一样：按设计稿等比缩放页面。

1. rem 方案：用 JS 按屏幕宽度设置 html 的 font-size（例如屏宽的 1/10），所有尺寸写成 rem。早期的 lib-flexible 就是这个思路，配合 postcss-pxtorem 把设计稿的 px 自动转成 rem
2. vw 方案：直接用 vw 表达比例。375 宽的设计稿上 1px 等于 100 / 375 vw，用 postcss-px-to-viewport 这类插件自动换算，不需要 JS

现在更推荐 vw 方案：不依赖 JS，没有脚本执行前的样式跳动。两种方案都有一个共同问题：大屏上会无限放大，需要给容器加 max-width 或者配合媒体查询限制。

媒体查询与移动优先#

移动优先：基础样式写给小屏，再用 min-width 逐级给大屏加样式。小屏设备不需要先套用桌面样式再逐条覆盖回来，代码量更少、也更好维护。注意不匹配的媒体查询里的样式照样会被下载和解析，移动优先省的是覆盖逻辑，不是下载量。断点按内容在哪里"挤不下"来定，不必对着某款设备的宽度。

流式字号与移动端视口高度#

clamp(最小值, 首选值, 最大值) 让字号在两个边界之间随视口平滑变化，不用写一堆断点。首选值里最好带上 rem（如 1rem + 2vw）：纯 vw 的字号不会响应用户的浏览器默认字号设置，桌面端放大页面时也几乎不变大，不利于需要大字的用户。

移动端浏览器的地址栏会伸缩，100vh 通常按地址栏收起时的最大高度计算，页面初始时底部会被遮住一截。新的视口单位把这几种情况分开：svh 是地址栏展开时的最小高度，lvh 是收起时的最大高度，dvh 随地址栏实时变化。

图片的响应式交给 srcset 和 sizes，让浏览器按屏幕宽度和 DPR 挑合适尺寸的图片。

代码示例#

/* 移动优先：先写小屏 */
.list {
  display: grid;
  gap: 1rem;
}

@media (min-width: 768px) {
  .list { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
  .list { grid-template-columns: repeat(3, 1fr); }
}

/* 流式标题：最小 1.5rem，最大 3rem，中间随视口变化 */
h1 {
  font-size: clamp(1.5rem, 1rem + 2.5vw, 3rem);
}

/* 全屏首屏：不支持 dvh 的浏览器用上一行的 vh 兜底 */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

面试官可能追问#

易错点#

• em 用在 font-size 上参照父元素字号，用在其他属性上参照当前元素自己的字号
• padding、margin 的百分比无论上下还是左右，都参照包含块的宽度
• height: 100% 要生效，父元素必须有明确的高度
• rem/vw 等比缩放适合移动端 H5，不适合内容型的桌面网站，后者更适合流式布局加断点