不能混用 postcss-px-to-viewport 和 postcss-pxtorem，因二者基准逻辑冲突：前者按设计稿宽度（如750）转vw，后者按固定rootvalue（如10）转rem，混用会导致尺寸错乱、对齐失败；必须二选一为主转换器，并通过selectorblacklist等精准控制例外px值。
为什么不能直接混用 postcss-px-to-viewport 和 postcss-pxtorem
两个插件会同时处理同一行 px 值，比如 margin: 10px：前者转成 margin: 1.333vw，后者转成 margin: 1rem（假设 rootValue: 10），最终结果取决于插件执行顺序，且无法预测。更麻烦的是，它们的基准逻辑根本冲突——px-to-viewport 按设计稿宽度（如 750）算比例，pxtorem 按固定 rootValue（如 10 或 37.5）换算，混在一起会导致尺寸错乱。
常见错误现象：font-size: 16px 在 iPhone 上被转成 0.427rem，但实际根字号是 52px（按 390px 屏宽计算），结果文字小一半；或按钮宽度写 width: 200px，转完变成 26.667vw，而父容器用的是 rem，对不齐。
- 必须只选一个插件作为主转换器，另一个停用
- 若要用
rem布局，就关掉px-to-viewport；反之亦然 - 想保留部分
px（如 1px 边框、图标字体大小），用selectorBlackList或propList精确控制，别靠“混用”来绕过
html { font-size: calc(100vw / 7.5); } 是 vw 驱动 rem 的唯一可靠写法
这行 CSS 的本质是：把 1rem 定义为设计稿中 1px 的等比缩放值（750px 设计稿 → 100vw / 7.5 = 1px 对应的 rem 值）。它不需要 JS，不依赖执行时机，也不受 DPR 影响，是当前最稳的混合基础。
实操要点：
- 必须配合正确的
<meta name="viewport">，否则100vw指向的是 980px 默认视口，全盘失效 - 别写
font-size: 13.333vw—— 小数在低端安卓上会累积舍入误差，导致 1px 偏移反复出现 - 设计稿若为 375px，应改为
calc(100vw / 3.75)，保持 “1rem = 1px（设计稿单位）” 的映射关系 - 字体建议加
text-size-adjust: 100%，防 iOS 系统字号干预
PostCSS 配置里要统一 viewportWidth 和 rootValue 的数值逻辑
如果你坚持用 JS 动态设 html.style.fontSize（比如基于 clientWidth），那 postcss-pxtorem 的 rootValue 必须和 JS 里“基准屏宽对应的目标根字号”一致。例如：以 375px 屏宽为基准，设目标 font-size 为 100px，则 rootValue: 100；若 JS 实际设的是 52px（iPhone 12），但配置写了 rootValue: 37.5，所有 rem 值都会错。
容易被忽略的点：
-
postcss-px-to-viewport的viewportWidth应等于设计稿宽度（如750），不是设备物理宽度，也不是window.innerWidth -
unitPrecision别设太高（推荐3），否则生成1.234567vw这种值，浏览器渲染时反而抖动 - 如果项目要兼容桌面端，
viewportWidth不能死锁 375/750，得配合mediaQuery: true+ 最大宽度限制（如max-width: 750px）
混用场景只发生在 CSS 层，不在 PostCSS 转换层
真正安全的“混合”，是 CSS 写法上的策略性共存，不是靠两个插件打架。例如：
用 vw 控制根字号（html { font-size: calc(100vw / 7.5); }），再用 rem 写所有间距、字体、尺寸；局部需要固定像素感的元素（如 border: 1px solid、图标 font-size），就显式写 px 并加入 postcss-px-to-viewport 的 selectorBlackList，或者干脆用 transform: scaleY(0.5) 模拟 1px。
关键提醒：
- 不要指望 PostCSS 自动识别“这里该用 vw，那里该用 rem”——它只认配置规则
- 所有
rem值都依赖于你定义的根字号，而根字号是否稳定，只取决于那一行calc()或 JS 初始化是否早、准、稳 - 横屏切换时 iOS Safari 的
100vw会短暂失真，可加@media (orientation: landscape) { html { font-size: calc(100vh / 7.5); } }补救
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
