postcss-px-to-viewport 是最轻量、构建时生效的 H5 适配方案，但 viewportWidth 必须严格匹配设计稿宽度（如 750px 设计稿则设为 750），否则尺寸错乱；selectorBlackList 按类名过滤，exclude 按路径过滤，二者不可混用；minPixelValue 仅作用于非字体属性，字体需单独配置 fontViewportUnit；propList 应精准列出需转换的 CSS 属性，避免误转无单位值或复合值。
直接说结论：用 postcss-px-to-viewport 把 px 转成 vw 是目前最轻量、构建时即生效、无需 JS 运行时干预的 H5 适配方案，但配置错一个参数，页面就可能在 iPhone 上撑满、在安卓机上缩成一团。
为什么 viewportWidth 必须和设计稿宽度一致
这个值不是随便填的，它决定了“1px 在设计稿里占多少比例”。比如 UI 给的是 750px 宽的设计稿，viewportWidth: 750；如果是 375px（iPhone6 尺寸），就填 375。填错会导致所有尺寸放大或缩小一倍。
常见错误现象：width: 750px 变成 100vw 后，在 375px 宽的手机上显示正常；但如果配了 viewportWidth: 375 却按 750px 设计稿写样式，结果就是所有元素变大两倍，页面横向溢出。
- 设计稿是 750px → 配
viewportWidth: 750 - 设计稿是 375px → 配
viewportWidth: 375 - 不确定设计稿宽度？打开 Sketch/Figma 文件属性看画布宽度
selectorBlackList 和 exclude 怎么配合用才不踩坑
selectorBlackList 是 CSS 类名黑名单，exclude 是文件路径过滤器，二者作用完全不同，混用会失效。
使用场景：
- 想让某个类（比如
.hairlines）里的border: 1px不转 vw → 加到selectorBlackList: ['.hairlines'] - 想跳过整个
node_modules或第三方组件库（如 vant 的样式）→ 用exclude: /node_modules/或exclude: [/node_modules/, /vant/] - 想只对特定页面启用转换（比如仅
pages/home/index.vue）→exclude: file => !file.includes('home')
容易踩的坑：exclude 是正则或函数，返回 true 表示“排除”，不是“包含”。写成 file.includes('home') 反而会把 home 页面排除掉。
minPixelValue 和 fontViewportUnit 要分开设
minPixelValue: 1 的作用是：小于等于 1px 的值不转换，专为 1px 边框保留原始像素值。但它对字体无效 —— 字体单位是否转换，由 fontViewportUnit 控制。
常见错误：只设了 minPixelValue: 1，但 fontViewportUnit 没显式指定，导致 font-size: 12px 被转成 3.2vw，在小屏上文字过小看不清。
- 希望字体也响应式 →
fontViewportUnit: 'vw'（默认就是这个） - 希望字体固定大小（比如标题必须 16px）→
fontViewportUnit: 'px'，再配合propList排除font-size - 1px 边框不转 →
minPixelValue: 1+selectorBlackList: ['.hairlines']
propList 不要盲目写 ['*']
propList: ['*'] 看起来省事，但会把 line-height: 1、z-index: 999、opacity: 0.5 全部当成带单位的值去处理，结果报错或生成无效 CSS。
正确做法是明确列出需要转换的属性：
- 常用安全项：
['width', 'height', 'padding', 'margin', 'font-size', 'border-radius'] - 避免转换：
line-height（无单位数字）、z-index、opacity、flex相关值 - 如果用了
transform: translateX(10px)，记得加'transform'到列表里，否则不转
真正容易被忽略的是：background-size: 20px 20px 这种复合值，插件默认只处理第一个值，第二个会被丢弃 —— 所以更稳妥的方式是拆成 background-size: 20px; 单值，或改用 background-size: 5.333333vw; 手动写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
