优先用postcss-pxtorem并配置exclude和selectorBlackList，根字体推荐JS动态计算但需内联执行并监听resize/orientationchange，关键参数为rootValue、propList和selectorBlackList。
PostCSS插件选哪个：postcss-pxtorem 还是 postcss-pxtorem2？
postcss-pxtorem 是目前最常用、维护最稳定的方案，但它的默认行为会把所有 px（包括字体、边框、阴影里的）都转成 rem，容易误伤。比如 border: 1px solid #ccc 转成 border: 0.0625rem，在某些安卓机上渲染发虚。postcss-pxtorem2 支持更细粒度的 exclude 配置，但社区生态弱，遇到问题难查。
- 优先用
postcss-pxtorem，但必须配exclude和selectorBlackList - 不要信任默认配置，尤其别漏掉
font-size的例外处理（比如font-size: 12px通常不该转） - 如果项目里大量使用
box-shadow: 0 0 4px rgba(0,0,0,.1)，得把shadow加进selectorBlackList，否则模糊值会被缩放失真
根字体大小怎么设：JS动态计算还是CSS媒体查询？
移动端适配的核心不是“转不转”，而是 html 根元素的 font-size 值是否匹配设备逻辑像素。JS 动态设置（如用 document.documentElement.style.fontSize）能精准响应视口变化，但存在 FOUC（闪屏）风险；纯 CSS 媒体查询写死断点（如 @media (max-width: 375px) { html { font-size: 37.5px; } }）无闪屏，但无法覆盖所有设备比（比如 390px 宽的 iPhone 14 Pro）。
- 推荐 JS 方案，但要在
最顶部内联执行，避免样式错乱 - 计算公式别硬套
deviceWidth / 10，应基于设计稿基准宽（如 750px →100vw / 7.5），否则在非标准分辨率下比例崩坏 - 必须监听
resize和orientationchange，横屏时重新计算，否则 iPad 横竖切字体突变
PostCSS配置里哪些参数最关键？
postcss-pxtorem 的配置项不多，但三个直接影响结果：
-
rootValue：必须和 JS 设置的根字体大小一致（如 JS 设为37.5px，这里就得填37.5），否则换算全错 -
propList：默认['*']太激进，建议显式写['font', 'font-size', 'line-height', 'margin', 'padding', 'width', 'height']，排除border、box-shadow等易出问题的属性 -
selectorBlackList：写正则要小心，['.ignore', '.hairlines']只能忽略类名开头匹配的，如果想忽略所有border相关，得用[/border/i]
为什么有些 px 没转？常见漏网场景
不是插件失效，而是规则没覆盖到：
立即学习“前端免费学习笔记（深入）”；
- CSS-in-JS 库（如 styled-components）生成的样式不在 PostCSS 处理流里，需额外配置 babel 插件或改用
css文件引入 -
@import的外部 CSS 文件，如果路径没被 PostCSS 入口包含（比如从 node_modules 引入），就不会处理 - Vue 单文件组件中
<style scoped></style>没问题，但<style module></style>的哈希类名可能干扰selectorBlackList匹配 - 构建工具（如 Vite）默认只处理
.css，对.pcss或.postcss后缀需手动注册处理器
实际开发中，最常被忽略的是：设计稿标注的 1px 边框，本意是视觉“纤细线”，结果被转成 0.02666667rem，在高清屏上直接消失。这种必须加 class="hairline" 并塞进 selectorBlackList，而不是靠调 minPixelValue 参数硬扛。
