移动端适配：rem、vw 与响应式方案对比

前置：viewport

不设置 viewport，手机会按 980px 渲染再缩小，字小得没法看：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

这是一切移动端适配的前提——布局视口宽度 = 设备宽度。

方案一：rem + 动态根字号

rem 是相对于 html 根字号的单位。让根字号随屏宽变化，整页元素就等比缩放：

// 设计稿 375px 宽，约定 1rem = 37.5px（屏宽的 1/10）
function setRem() {
  document.documentElement.style.fontSize =
    document.documentElement.clientWidth / 10 + 'px'
}
setRem()
window.addEventListener('resize', setRem)

设计稿上量出 75px 就写 2rem（配合 PostCSS 的 pxtorem 插件自动换算）。这就是阿里 flexible.js 方案，过去几年的绝对主流。

方案二：vw（现代首选）

vw 直接就是视口宽度的 1%，浏览器原生支持，连那一段 JS 都不需要：

/* 375px 设计稿：1px = 100/375 vw ≈ 0.2667vw；75px 的元素：*/
.box { width: 20vw; }

用 PostCSS px-to-viewport 插件配置设计稿宽度，写代码直接量 px，构建自动转 vw。比 rem 少一个环节，是现在的推荐做法。

字号别跟着无脑缩放

等比缩放在大屏（平板）上字会大得离谱。更好的搭配：

• 布局尺寸用 vw/百分比弹性伸缩
• 字号用 clamp() 限制上下限

h1 { font-size: clamp(20px, 5.3vw, 32px); } /* 小屏不挤、大屏不爆炸 */
.container { padding-inline: clamp(12px, 4vw, 40px); }

图片与断点

• 弹性图片：max-width: 100%; height: auto
• 需要 PC/移动两套结构时用媒体查询断点，移动优先（min-width 向上增强）
• 二倍屏/三倍屏位图要用 2x/3x 资源或直接上 SVG

选型建议：纯移动 H5 直接 vw + PostCSS；响应式全站走媒体查询 + 流式布局；容器查询（@container）普及后组件级自适应会更彻底，值得关注。