最轻量方案是postcss-px-to-viewport配合设计稿宽度配置；amfe-flexible+postcss-pxtorem因停更、dpr适配失控及rem语义错误已被淘汰；需正确设置viewportWidth、unitPrecision、selectorBlackList和exclude，并同步配置viewport meta与Vite构建目标。
直接用 postcss-px-to-viewport 配合设计稿宽度配置，是当前最轻量、维护成本最低的方案。lib-flexible + postcss-pxtorem 已被官方弃用，且 rem 布局在现代项目中容易引发字体继承混乱和调试困难。
为什么不用 amfe-flexible + postcss-pxtorem？
这两个包曾是主流，但现在存在三个硬伤：
-
amfe-flexible已停止维护，GitHub 仓库标记为 deprecated，不兼容 iOS 16+ 的视口缩放策略 -
rootValue必须手动匹配设计稿（如 750px 设计稿对应 75），但实际设备 dpr 变化时 html font-size 计算逻辑不可控，导致元素“跳动” - rem 是字体单位，用于布局本身违反语义；CSS 中混用
rem和px（比如 border、阴影）会破坏一致性
postcss-px-to-viewport 的正确配置方式
它把 px 直接转成 vw/vh，纯 CSS 实现，无 JS 干预，无闪烁，适配更稳。关键不是装上就行，而是参数要对：
- 设计稿宽度必须填准：如果是 UI 给的 750px 稿，
viewportWidth: 750；1920px 大屏稿则填1920 -
unitPrecision建议设为5，避免生成0.00001vw这类无效值 -
selectorBlackList必须加，例如['.ignore-viewport', '.van-button']，否则 Vant 等组件库的内部尺寸会被误转 - 不要漏掉
exclude：设为/node_modules/，防止第三方 CSS 被重写
配置示例（postcss.config.js）：
立即学习“前端免费学习笔记（深入）”；
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 750,
unitPrecision: 5,
viewportUnit: 'vw',
selectorBlackList: ['.ignore-viewport', '.van-'],
exclude: /node_modules/
}
}
}
必须同步做的两件事
只配 PostCSS 不够，移动端行为还依赖底层约束：
-
index.html中的<meta name="viewport">必须存在且完整：content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"。缺任何一项都可能导致双击放大或横屏错位 - Vite 构建目标需对齐真实设备：在
vite.config.ts的build.target中至少包含'chrome87'和'ios14'，否则vw在旧版 Safari 中可能不生效
真正容易被忽略的是 selectorBlackList 和 exclude —— 很多人配完发现按钮变巨大、图标消失，八成是 Vant 或 Element Plus 的 class 被批量转成了 vw。别省这一步。
