应设 viewportwidth: 375 而非 750，因其代表目标设备逻辑视口宽度；proplist 需显式声明常用尺寸属性，避免转换 border 等物理意义属性；通过 exclude、selectorblacklist 和注释可精准跳过转换；unitprecision 推荐移动端设 3–4、pc 端设 5。
直接用 postcss-px-to-viewport 插件，配置对了就能跑，不需要改写法、不侵入业务代码。
为什么不能直接用 viewportWidth: 750？
设计稿是 750px 宽，但插件的 viewportWidth 不该填 750——它代表的是「目标设备逻辑视口宽度」，不是设计稿像素值。填错会导致所有转换结果翻倍或减半。
- 常见错误：设计稿 750px，却设
viewportWidth: 750→ 实际生成100vw = 750px，但在 iPhone 上视口只有 375px（CSS 像素），结果元素被放大两倍 - 正确做法：按目标设备基准设，手机端通常用
375，PC 端适配可设1920，uni-app/Taro 项目建议先确认框架默认 viewport 设置 - 若设计稿 750px 且明确按 2x 视网膜屏出图，
viewportWidth仍应填375，插件内部已按此比例换算
propList 白名单怎么填才不漏不滥？
默认 ['*'] 看似省事，但会把 border、outline、box-shadow 全部转成 vw，导致细线在大屏上糊成一片。
- 推荐显式声明：
propList: ['font', 'font-size', 'line-height', 'width', 'height', 'padding', 'margin', 'max-width', 'min-width'] - 避免转换
border类属性：它们物理意义是“描边粗细”，不是“尺寸占比”，强行转 vw 在 4K 屏上可能变成 0.5vw ≈ 4px，失去 hairline 效果 - 如果要用
1px边框，配合minPixelValue: 1+selectorBlackList: ['.hairlines']更可控
如何让某些文件或选择器跳过转换？
不是所有 CSS 都适合 vw 缩放，比如图标字体、绝对定位的蒙层、第三方 UI 库样式。
- 按文件排除：在
exclude中用正则，例如/node_modules/或/src\/assets\/iconfont\.css$/ - 按类名忽略：加
selectorBlackList: ['.ignore-px', '.fixed-layout']，匹配到的选择器下所有 px 值都不转 - 行级控制：在 CSS 里写注释
/* px-to-viewport-ignore-next */或/* px-to-viewport-ignore */，下一行或整块规则跳过 - 注意：Vue 单文件组件中，
<style scoped></style>的选择器会被自动添加属性选择器，selectorBlackList仍有效，但需匹配最终生成的选择器名
unitPrecision 设太高反而出问题？
设 unitPrecision: 6 看起来精确，但实际生成的 CSS 里会出现 4.266667vw 这类值，部分低端 Android WebView 解析时会四舍五入丢精度，导致相邻元素错位。
- 移动端推荐
unitPrecision: 3或4，足够覆盖人眼可辨差异 - PC 端适配可放宽到
5，但需实测 Chrome/Firefox/Edge 渲染一致性 - 如果项目用了 CSS 变量动态计算（如
--size: calc(1rem * 1.2)），高精度小数可能在 calc 中引发浮点误差，此时宁可略低精度
真正难的不是配置参数，而是判断哪些地方“不该转”——vw 是为等比缩放服务的，而 border、阴影、图标尺寸这些本就不该随屏幕等比变化。留心那些被自动转换后看起来“怪怪的”的细节，往往就是 propList 或 selectorBlackList 没控住的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
