结论：postcss-pxtorem + 运行时js动态设html.font-size是最可控、兼容性最好、逻辑最清晰的等比缩放方案；viewport必须写死为width=device-width且置于head顶部，rootvalue与js设置的font-size必须严格相等，mediaquery必须关闭，exclude需排除ui库路径。
直接说结论：用 postcss-pxtorem + 运行时 JS 动态设 html.font-size 是目前最可控、兼容性最好、适配逻辑最清晰的等比缩放方案；postcss-px-to-viewport 或 postcss-mobile-forever 仅适合无 JS 干预、纯构建期换算的轻量场景，但会牺牲 DPR 适配和可访问性。
viewport 必须先写死，否则所有单位都白算
不加这行 <meta name="viewport" content="width=device-width, initial-scale=1.0">，浏览器默认用 980px 布局视口渲染，rem 和 vw 全部基于这个错误基准计算。常见现象：页面横向滚动、文字小得看不清、按钮点击区域错位。
必须确保：
- 这行
<meta>在最顶部，不能被 JS 动态插入或覆盖 -
width=device-width是核心，它让布局视口宽度 = 设备 CSS 像素宽度 - 不要加
minimum-scale或额外缩放限制，某些安卓 WebView 会因此忽略initial-scale
rootValue 和 JS 设置的 font-size 必须完全相等
postcss-pxtorem 不读 DOM、不查屏幕宽、不做任何运行时判断，它只做一件事：rem = px / rootValue。如果你 JS 里写的是 document.documentElement.style.fontSize = screen.width / 7.5 + 'px'（对应 750px 设计稿），那 rootValue 就必须是 75，不是 7.5，也不是 37.5。
常见错误现象：
- 控制台没报错，但页面整体变小或拉伸
-
getComputedStyle(document.documentElement).fontSize返回16px—— 说明 JS 没生效，而 CSS 已按错误rootValue转完 - 横屏后元素错位，因为
orientationchange时 JS 重设了font-size，但 rem 值仍是构建时算死的
JS 计算必须基于 window.screen.width * window.devicePixelRatio，而非 clientWidth（后者受滚动条、缩放、iframe 影响）；建议在 内联执行，并用 setTimeout(fn, 100) 防抖监听 resize 和 orientationchange。
哪些 px 默认不转？怎么安全放开？
border: 1px、border-radius: 4px、box-shadow: 0 2px 4px 里的 px 默认不转，这不是 bug，是插件防护机制：小屏下 1px / 75 ≈ 0.013rem，渲染可能直接归零。
实操建议：
- 别一上来就配
propList: ['*']，尤其慎加box-shadow - 需要转换
border？明确写propList: ['font-size', 'width', 'height', 'border', 'border-radius'] - 用
minPixelValue: 2拦住 1px 级别转换，避免线条消失 - 排除特定类名：
selectorBlackList: [/^\.hairline/, '.ignore']，比全局开闸更可控
mediaQuery: true 是高危配置，务必关掉
设成 true 后，@media (max-width: 768px) 会被转成 @media (max-width: 20.48rem)。而 20.48rem 在 iPhone SE（375px 屏宽）上约 768px，在 iPad Pro（1024px）上却接近 2099px —— 断点彻底失效。
务必保持 mediaQuery: false（默认值）。媒体查询逻辑应由 JS 动态控制根字号，或单独用 px 写断点（如 @media (max-width: 768px)）。同时，exclude 必须排除 node_modules 和 UI 库路径（如 vant、uni-app 的内置样式），否则第三方组件内建 px 值也会被错误转换。
最易被忽略的一点：所有适配效果都依赖「JS 设置的根字号」与「PostCSS 构建时的 rootValue」严格对齐——差 1 都会导致整体比例偏移，且这种偏移在真机上很难一眼定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
