PostCSS的postcss-pxtorem插件默认将所有px无差别转为rem，导致border、box-shadow等带像素语义的属性失真，第三方库样式错乱，媒体查询失效；需通过propList限定转换属性、selectorBlackList排除特定选择器、配合动态设置根字号才能正确适配。
PostCSS 的 postcss-pxtorem 插件能自动把 CSS 中的 px 转成 rem，但默认行为容易出错——它会把所有 px 都转，包括 border、box-shadow 里的值，甚至第三方库样式，导致布局错乱。
为什么直接启用 postcss-pxtorem 后页面崩了？
插件默认对所有 px 值生效，不区分语境。比如 border: 1px solid #ccc 被转成 border: 0.0625rem solid #ccc，在高 DPR 屏幕上可能根本看不见；又或者 font-size: 14px 被转，但根字号没同步设置，结果文字全变小。
常见错误现象：
- 细边框消失或过粗
- 图标字体（如
font-size: 16px）缩得太小 - 第三方组件样式被误转（如 Ant Design 的
.ant-btn） - 媒体查询里的
px（如@media (max-width: 768px)）也被转，触发条件失效
如何精准控制哪些 px 该转、哪些该放过？
关键靠插件的 propList 和 selectorBlackList 配置项。前者指定只转换哪些 CSS 属性的 px，后者排除匹配选择器的整条规则。
立即学习“前端免费学习笔记（深入）”；
推荐配置示例（以根字号为 37.5px，即 1rem = 37.5px 为例）：
postcss({
plugins: [
require('postcss-pxtorem')({
rootValue: 37.5,
propList: ['font', 'font-size', 'line-height', 'letter-spacing'],
selectorBlackList: [/^html$/, /\.ignore/, /\.no-rem/],
minPixelValue: 2,
mediaQuery: false
})
]
})说明：
-
propList限定只转字体相关属性，避开border、padding等易出问题的属性 -
selectorBlackList匹配html标签（防止根元素自身被转）、含.ignore或.no-rem的类名 -
minPixelValue: 2表示小于等于 2px 的值不转（避免1px变成0.0267rem这种无效值） -
mediaQuery: false关闭媒体查询内px的转换，防止断点失效
根元素 font-size 怎么动态设置才靠谱？
插件只负责“转”，不负责“设根字号”。如果根字号没按设计稿基准正确设置，所有 rem 都会失准。
典型做法是用 JS 动态计算：
function setRootFontSize() {
const baseSize = 37.5; // 设计稿宽度 750px 时，1rem = 37.5px
const scale = document.documentElement.clientWidth / 750;
document.documentElement.style.fontSize = baseSize * scale + 'px';
}
setRootFontSize();
window.addEventListener('resize', setRootFontSize);注意点：
- 必须在
<html>上设置font-size，不能用body或其他容器 - 某些安卓 WebView 不支持
resize事件，可补充orientationchange和定时检测 - 服务端渲染（SSR）场景下，首次渲染时 JS 未执行，需配合
initial-scale=1和 viewport 设置避免闪动
postcss-pxtorem 和 lib-flexible 能一起用吗？
不能混用。两者底层逻辑冲突：lib-flexible 通过 JS 动态改 viewport 缩放和根字号，而 postcss-pxtorem 是纯 CSS 单位转换，依赖固定根字号。同时引入会导致 rem 计算倍数叠加，尺寸完全失控。
替代方案：
- 彻底弃用
lib-flexible，改用postcss-pxtorem+ 手动 setRootFontSize（推荐） - 若项目已深度耦合
lib-flexible，改用postcss-pxtorem的unitPrecision和replace选项做最小干预，仅处理字体类属性 - 现代项目建议直接上
vw/vh或 CSS 自定义属性 + clamp()，rem 方案本身在响应式复杂度上已显吃力
真正麻烦的不是怎么配插件，而是得想清楚：你到底要适配什么设备、是否真需要 JS 控制根字号、第三方 UI 库的样式要不要隔离——这些决策比写几行配置重要得多。
