必须先配置viewport meta标签，否则自适应方案失效；需设width=device-width、initial-scale=1，并按需设置user-scalable=no。
必须先配好 viewport meta 标签
没这一步，后面所有自适应方案都会失效。很多开发者在 CSS 里折腾 rem 或 vw，却忘了页面根本没被正确识别为移动端视口。
直接在 <head> 里加这行：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
注意三点：
-
width=device-width是核心，不能写死成width=750或其他固定值 -
initial-scale=1必须显式声明，iOS Safari 某些版本不设它会默认缩放 -
user-scalable=no要按产品需求决定——金融类、表单类页面建议禁用，但阅读类页面可能需要保留
postcss-pxtorem 配置常见翻车点
这个插件把 px 自动转 rem，但默认配置极易出问题：字体变小、按钮错位、第三方 UI 库（如 van-button）样式崩坏。
立即学习“前端免费学习笔记（深入）”；
关键参数要改：
-
rootValue别硬写37.5或75，应和设计稿宽度挂钩：750px 设计稿 →rootValue: 75；375px 设计稿 →rootValue: 37.5 -
propList别无脑写['*']，字体、边框、阴影等属性转 rem 后常失真，推荐：['font', 'font-size', 'width', 'height', 'padding', 'margin'] -
selectorBlackList必须加，至少填['.van-', '.el-', '.nut-']，否则组件库内部 px 值被转，UI 直接错乱
为什么 postcss-px-to-viewport 在大屏反而更稳？
在 iPad、折叠屏或横屏 H5 场景下，rem 方案容易因根字体计算溢出导致元素过大；而 vw 是纯 CSS 计算，不依赖 JS 运行时，且能自然适配任意宽度。
配置时盯住这几个值：
-
viewportWidth必须填设计稿原始宽度（比如 UI 给的是 1920px 大屏稿，就写1920，不是设备宽度） -
unitPrecision建议设3，避免生成1.23456vw这种无效精度 -
mediaQuery设为true，否则横竖屏切换时vw值不会重算（尤其 iOS Safari） - 字体慎用
vw：小字号（如12px）转成0.625vw在窄屏下会变成2px，肉眼不可读，建议对font-size单独用rem或媒体查询兜底
别忽略 JS 动态设置根字体的 fallback 逻辑
哪怕用了 postcss-pxtorem，仍需一段极简 JS 控制 html 的 font-size，否则首次渲染或横屏切换时会出现闪动或错位。
最简健壮写法：
(function () { const baseWidth = 375; // 设计稿宽度 const scale = Math.min(document.documentElement.clientWidth / baseWidth, 2); document.documentElement.style.fontSize = scale * 100 + 'px';})();重点在 Math.min(..., 2) —— 防止超大屏（如折叠屏展开态）把根字体拉到几百 px，导致所有 rem 元素爆炸式放大。这个上限值 2 是实测下来最安全的边界，比写死 75px 更可靠。
