viewportWidth必须设为375而非755，因其表示目标设备逻辑视口宽度（如iPhone CSS视口宽375px），填750会导致100vw=750px，在375px屏上元素拉伸两倍；设计稿750px是2x出图，插件内部已自动折算。
直接填 viewportWidth: 375，不是设计稿的750，否则所有尺寸翻倍。
为什么 viewportWidth 必须设成 375 而不是 750？
插件里的 viewportWidth 不是“设计稿宽度”，而是“目标设备逻辑视口宽度”。iPhone 等主流手机 CSS 视口宽度是 375px（不是物理像素），所以填 375 才能让 375px → 100vw 严格对应。填 750 会导致生成的 100vw = 750px，在 375px 宽的屏幕上元素被强制拉伸两倍——这是最常踩的坑。
即使设计稿是 750px（2x 出图），插件内部已按比例自动折算，你仍应填 375。
- uni-app/Taro 项目需额外确认框架是否注入了
，否则 vw 计算失效 - PC 端适配可设
viewportWidth: 1920，但需同步调整 UI 基准和测试范围
propList 别用 ['*']，否则 border 会糊成一片
propList: ['*'] 看似省事，实际会把 border、outline、box-shadow 全部转成 vw。比如 border: 1px solid #000 → border: 0.267vw solid #000，在 4K 屏上可能渲染为 4px，彻底失去 1px 线效果。
推荐显式声明常用尺寸类属性：
propList: ['font', 'font-size', 'line-height', 'width', 'height', 'padding', 'margin', 'max-width', 'min-width']- 如需保留 1px 边框，加
minPixelValue: 1+selectorBlackList: ['.hairlines']，然后给对应元素加class="hairlines"
哪些文件或选择器该跳过转换？
第三方图标字体、绝对定位弹层、node_modules 里的样式，都不适合 vw 缩放。靠配置精准排除：
- 按文件：用
exclude正则，例如/\/src\/assets\/iconfont\.css$/或/node_modules\// - 按类名：设
selectorBlackList: ['.ignore-px', '.fixed-layout']，匹配到的选择器下所有 px 都不转（中也生效，但要匹配编译后的真实选择器名） - 行级控制：CSS 里写
/* px-to-viewport-ignore-next */（忽略下一行）或/* px-to-viewport-ignore */（忽略整块规则）
unitPrecision 设太高反而导致渲染错位
unitPrecision: 6 会生成 4.266667vw 这类值，部分低端 Android WebView 解析时四舍五入丢精度，相邻元素间距出现 0.1px 级别偏差，肉眼可见错位。
移动端够用的精度是 3 或 4（例如 4.267vw），人眼无法分辨更细差异；PC 端可设 5，但需实测兼容性。
真正容易被忽略的是：转换逻辑依赖运行时视口宽度，但插件只做构建时静态替换——它不感知屏幕旋转、动态 viewport 变更或 iframe 嵌套场景。这些边界情况得靠 JS 补充判断，不能全指望 PostCSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
