响应式布局常见方案：

  1. 媒体查询：按断点切换样式，栅格系统的基础；
  2. 百分比 / Flex / Grid：流体布局，随容器伸缩；
  3. rem + 动态根字号：等比缩放方案；
  4. 视口单位 vw/vh：直接相对视口；
  5. 图片响应式：srcset、sizes、max-width: 100%。

rem 原理：rem 是相对于根元素（html）font-size 的长度单位。让根字号随屏幕宽度变化（媒体查询、JS 计算或直接用 vw），所有用 rem 标注的尺寸就等比缩放。

html { font-size: calc(100vw / 375 * 16); } /* 以 375 设计稿为基准 */
.box { width: 3.75rem; } /* 设计稿 60px → 60/16 = 3.75rem */

实际项目常配合 postcss-pxtorem 之类的工具自动把 px 转成 rem。易错点：根字号直接用 vw 时用户无法缩放字体（无障碍问题），需要设置上下限或结合媒体查询；1px 边框在高倍屏下需用 transform: scale 或 hairline 方案处理。追问：rem 与 vw 方案的取舍、em 与 rem 的区别。