postcss-px-to-viewport的核心价值在于转换精准性与可控性。关键配置包括：viewportwidth须严格对齐设计稿宽度（如750或375）；proplist和selectorblacklist协同控制转换范围；minpixelvalue和unitprecision保障1px边框与小数精度；mediaquery必须开启以确保响应式断点随视口缩放。
postcss-px-to-viewport 的核心价值不是“能不能转”，而是“转得准不准、控得住、不翻车”。它默认就能工作，但多数项目出问题，都卡在配置和上下文理解上。
viewportWidth 必须对齐设计稿宽度，否则所有 vw 值全偏
这个参数不是屏幕宽度，也不是设备宽度，而是你拿到的设计稿 PSD/Sketch 文件的画布宽度。常见值是 375（iPhone SE/8）或 750（2x 倍图），选错会导致转换结果整体缩放失真。
比如设计稿是 750px 宽，你配成 viewportWidth: 375，那 100px 会转成 26.66667vw（按 375 算），实际应为 13.33333vw（按 750 算）——差整整一倍。
- UI 给的是 750px 切图 → 配
viewportWidth: 750 - UI 给的是 375px 预览稿 → 配
viewportWidth: 375 - 团队混用两种稿？必须统一，不能靠插件“猜”
propList 和 selectorBlackList 是控制范围的双保险
默认 propList: ['*'] 表示所有带 px 的属性都转，但现实中你会遇到这些情况：
-
border: 1px solid #ccc→ 转成0.26667vw，在大屏上几乎看不见 - 第三方 UI 库（如 Element Plus）的样式被误转，导致布局错乱
- 某些动画关键帧里写死的
transform: translateX(20px)不该转
解决方式：
- 用
propList: ['font-size', 'width', 'height', 'padding', 'margin']显式声明只转常用布局属性 - 给需要保留 px 的选择器加类名，比如
class="ignore-px"，再配selectorBlackList: ['ignore-px'] - 对整个第三方样式文件做
exclude: /node_modules/（需插件支持，postcss-px-to-viewport-8-plugin可用）
minPixelValue 和 unitPrecision 直接影响 1px 边框和小数精度
移动端最典型的坑就是“1px 边框变没了”。因为 1 / 375 * 100 ≈ 0.26667vw，在多数设备上渲染为 0 像素。
- 设
minPixelValue: 2：所有 ≤2px 的值都不转，1px和2px保持原样 - 设
unitPrecision: 3：避免14px → 3.7333333333333334vw这种超长小数，CSS 体积更小，也更易调试 - 注意：过低的
unitPrecision（如1）会导致3px和4px都转成1vw，间距塌陷
mediaQuery: true 不是可选项，而是响应式断点准确的前提
如果你写了 @media (max-width: 750px)，而插件没开 mediaQuery，那这个 750px 就还是固定像素，不会随视口缩放——断点就失效了。
- 开启后，
@media (max-width: 750px)会变成@media (max-width: 200vw)（按viewportWidth: 375算） - 但要注意：媒体查询里的
px值必须是“设计稿逻辑宽度”，比如断点对应设计稿的 750px，才适合配viewportWidth: 375；如果断点本身是设备物理宽度（如414pxiPhone 8+），就不该由这个插件处理 - 建议统一用设计稿比例定义断点，比如
@media (max-width: 100vw)（即设计稿宽度的 100%）
真正难的从来不是“怎么装”，而是“哪一行该转、哪一行不该转、为什么这行没转”。postcss-px-to-viewport 的配置项看着多，其实每一条都在回应一个具体场景里的真实取舍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
