postcss-pxtorem 不再推荐因无差别转换所有 px 导致视觉异常，且不支持基准适配与选择性忽略；推荐用 postcss-plugin-px2rem 精确控制转换范围，并需配合 JS 动态设置 html font-size 及处理 Safari 小数精度限制。
为什么 postcss-pxtorem 不再推荐直接使用
因为 postcss-pxtorem 默认把所有 px 都转成 rem，包括 border、box-shadow 里的 px，甚至第三方 UI 库的样式也会被误转，导致边框变粗、阴影消失等视觉异常。它也不区分设计稿基准（如 375 vs 750），更不支持选择性忽略某些类名或属性。
用 postcss-plugin-px2rem 精确控制转换范围
这个插件比 postcss-pxtorem 更轻量，且通过配置能明确指定哪些 CSS 属性参与转换、哪些类名下的规则跳过、是否保留原始 px 注释等。关键参数有：
-
rootValue：对应设计稿宽度 / 10，比如 375px 设计稿设为37.5；750px 则用75 -
propList：只对列表中的属性生效，推荐['font', 'font-size', 'line-height', 'letter-spacing']，避免动border -
selectorBlackList：传入字符串前缀，如['.ignore', '.hairline']，匹配到的类名下所有px都不转 -
mediaQuery：设为true才处理媒体查询内的px（默认不处理）
示例配置（postcss.config.js）：
module.exports = {
plugins: {
'postcss-plugin-px2rem': {
rootValue: 37.5,
propList: ['font*', 'line-height', 'letter-spacing'],
selectorBlackList: ['.no-rem', '.van-'],
mediaQuery: true
}
}
}
必须配合 HTML 的 font-size 动态计算
仅靠 PostCSS 转换没用——rem 是相对于根元素 font-size 的单位，如果 的 font-size 固定为 16px，那所有 rem 实际还是按 16 像素算，起不到适配作用。
立即学习“前端免费学习笔记（深入）”；
你需要在页面加载时运行一段 JS，根据设备宽度动态设置 document.documentElement.style.fontSize。常见做法是：
- 以 375px 屏宽为基准，1rem = 37.5px → 此时
html的font-size应为100px（因为 375 ÷ 37.5 = 10，而 1rem = 100px） - 所以通用公式是：
fontSize = (clientWidth / 375) * 100 - 务必监听
resize和orientationchange，尤其在 iOS 横竖屏切换时会触发 layout 变化但不触发 resize
最小可用脚本（放在 内）：
(function () {
function refreshRem() {
const width = document.documentElement.clientWidth || 375;
const fontSize = width / 375 * 100;
document.documentElement.style.fontSize = fontSize + 'px';
}
refreshRem();
window.addEventListener('resize', refreshRem);
window.addEventListener('orientationchange', refreshRem);
})();
注意 Safari 对 rem 的小数精度限制
Safari（尤其是 iOS 14 之前）会把小于 12px 的 rem 值向下取整到最近的整数像素，比如 0.32rem（≈12px）可能渲染成 11px。这不是 PostCSS 的问题，而是浏览器渲染层限制。
应对方式只有两个：
- 在
postcss-plugin-px2rem中开启minPixelValue: 2（默认是 0），让小于 2px 的px值不转rem，保持原样； - 对需要精确控制的细线、图标尺寸，改用
transform: scale(0.5)或 viewport 单位（vw）替代。
真正麻烦的不是怎么转，而是得同时盯住 PostCSS 配置、JS 根字体逻辑、设计稿基准、浏览器兼容边界这四头——漏掉任何一头，页面就可能在某台手机上突然“缩成一团”或者“文字糊成一片”。
