PostCSS + pxtorem 不能开箱即用，必须通过 JS 动态设置 html 根字号（如 font-size = (screenWidth / 375) * 37.5），否则 rem 按默认 16px 解析导致布局错乱；配置 rootValue 需与 JS 计算逻辑严格对齐。
PostCSS + pxtorem 在移动端 H5 中不能直接“开箱即用”，必须手动注入根字体大小（font-size）逻辑，否则所有 rem 值都会按浏览器默认 16px 解析，导致布局严重失真。
为什么 postcss-pxtorem 转换后页面还是错乱？
常见现象是按钮变小、文字挤在一起、间距几乎消失——这不是插件没生效，而是它只负责把 px 替换成 rem，不负责设置 html 根元素的 font-size。没有动态根字号，1rem 就永远等于 16px，响应式就失效了。
使用场景：你写的是 width: 75px;，插件转成 width: 0.5rem;，但若 html { font-size: 16px; } 没变，那 0.5rem 还是 8px，远小于设计稿预期的 75px（按 375px 屏宽等比）。
- 必须在 JS 中运行时计算并设置
document.documentElement.style.fontSize - 推荐用「等比缩放」方案：
font-size = (screenWidth / 375) * 16，375 是设计稿基准宽度 - 务必监听
resize和orientationchange，横竖屏切换时重算 - 不要用
lib-flexible等过时库，它和现代 viewport 配置冲突，且已停止维护
postcss-pxtorem 的关键配置项怎么设？
配置错一个参数，px 可能被漏转、误转，或转到不该转的地方（比如第三方 UI 库的 CSS）。
立即学习“前端免费学习笔记（深入）”；
核心配置建议（以 postcss.config.js 为例）：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5, // ⚠️重点！不是 16，而是 375px 设计稿下 1rem = 10px 的换算基数
unitPrecision: 5,
propList: ['*'], // 转所有含 px 的属性；如只需部分，写 ['width', 'font-size']
selectorBlackList: ['.no-rem', '.ignore'], // 匹配类名，跳过转换
replace: true,
mediaQuery: false, // 是否处理媒体查询里的 px？一般关掉，避免响应断点混乱
minPixelValue: 2 // 小于 2px 的 px 值不转（如 border: 1px → 保留在原单位）
}
}
}注意：rootValue: 37.5 对应的是「设计稿 375px 宽度下，1rem = 10px」，这样写 font-size: 16px 就自动变成 1.6rem，最终在 iPhone 上渲染为 16px（因为此时 html 的 font-size 是 10 * (375/375) = 10px？不对——等等，这里要对齐：实际运行时 JS 设置的根字号必须和这个 rootValue 匹配。所以如果你设 rootValue: 37.5，JS 就得设 font-size = (screenWidth / 375) * 37.5，才能让 1rem 真正对应设计稿的 10px。
JS 设置根字号的最小可行代码长什么样？
不用框架、不依赖构建时注入，纯前端运行时控制，兼容 iOS/Android WebView。
放在 里最顶部的 <script></script> 中（防止 FOUC）：
(function() {
function setRootFontSize() {
const baseWidth = 375;
const baseFontSize = 37.5; // 必须和 postcss-pxtorem 的 rootValue 一致
const screenWidth = document.documentElement.clientWidth || window.innerWidth;
const fontSize = (screenWidth / baseWidth) * baseFontSize;
document.documentElement.style.fontSize = fontSize + 'px';
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);
window.addEventListener('orientationchange', setRootFontSize);
})();- 不要用
document.body.clientWidth，可能为 0（DOM 未 ready） - 不要用
window.screen.width，它返回设备物理宽度（如 iPhone 12 是 1170），不是视口宽度 - 如果用了
viewport的maximum-scale=1或user-scalable=no，iOS Safari 可能不触发resize，加orientationchange是兜底 - SSR 场景下这段 JS 必须只在客户端执行，服务端跳过
为什么有些元素的 px 没被转？
常见原因不是插件失效，而是匹配规则被绕过了：
-
propList默认是['*']，但如果显式写了['font-size']，那padding、margin就不会转 -
selectorBlackList里写了'.van-button'，但组件类名实际是'van-button--primary'，没匹配上，结果按钮内边距仍为 px —— 此时应改用正则或扩大黑名单范围 - CSS-in-JS（如 styled-components）生成的样式不在 PostCSS 处理链路中，
px不会被转，需手动用rem或函数计算 - 内联样式（
style="width: 100px;"）完全逃逸 PostCSS，无法转换，应尽量避免
调试技巧：打开 DevTools → Elements → 找任意带 px 的样式 → 看是否变成 rem；如果没变，先检查该 CSS 文件是否被 PostCSS 插件真正处理（Webpack 构建日志搜 pxtorem，Vite 看 vite-plugin-postcss 是否启用）。
最易被忽略的一点：开发时用 Chrome 模拟器看效果，但它的视口宽度是固定值（比如 375），而真实手机横屏时 clientWidth 可能变成 667（iPhone 8），此时 JS 设置的根字号变了，但开发者工具里没刷新样式缓存，容易误判为转换失败——务必在真机上验证横竖屏切换。
