postcss-px-to-viewport无法解决1px边框在高DPR设备变粗问题，因其仅转换单位而不感知DPR、不生成伪元素或缩放逻辑；需配合媒体查询或JS检测+CSS变量+伪元素方案，并用selectorBlackList隔离边框类。
PostCSS插件本身不直接处理DPR相关的边框渲染问题，postcss-px-to-viewport 只负责把px转成vw/vh，对1px边框在高DPR设备上变粗的现象无能为力。真正要解决这个，得靠CSS层的适配策略，配合JS检测或媒体查询做条件性处理。
为什么 postcss-px-to-viewport 对 1px 边框无效
该插件只转换声明中的数值单位，比如把 border: 1px solid #000 中的 1px 按比例转成 0.13333vw（假设设计稿宽750px），但这个值在不同DPR设备上依然会被浏览器映射为多个物理像素。它没感知DPR，也不生成伪元素、不插入scale缩放逻辑，所以无法修复视觉粗细问题。
-
postcss-px-to-viewport的目标是布局响应式，不是像素级精度控制 - 它不会修改
border的声明结构，更不会自动加::after或transform - 即使你设
minPixelValue: 0.5，也仅影响“是否转换”，不等于“生成0.5px”——而0.5px本身在安卓上基本不渲染
用 PostCSS 配合 media query 实现 DPR 条件样式
虽然插件不直接解决，但你可以用 PostCSS + 媒体查询预埋DPR适配规则，再让 postcss-px-to-viewport 避开这些规则（通过 selectorBlackList 或 propBlackList）。
- 在CSS中手动写针对高DPR的边框类，例如：
.border-hairline::after - 配置插件时把这类选择器加入
selectorBlackList: ['.border-hairline']，防止被误转 - 用
@media (-webkit-min-device-pixel-ratio: 2)或@media (min-resolution: 192dpi)包裹伪元素逻辑，确保只在高DPR下生效 - 注意：Chrome DevTools 默认模拟dpr=1，真机调试前务必在设置里开启“Device pixel ratio”选项
更稳妥的做法：JS检测 + class注入 + CSS变量驱动
PostCSS可以配合构建时注入CSS变量，但动态DPR适配必须靠运行时JS。推荐在页面加载初期就执行检测，并把结果挂到 上：
- 执行
document.documentElement.classList.add(`dpr-${window.devicePixelRatio}`)（如dpr-2） - 在CSS中写：
.dpr-2 .border-hairline::after { transform: scaleY(0.5); } - 把
.border-hairline加入selectorBlackList，避免被postcss-px-to-viewport干扰 - 父容器必须设
position: relative，否则伪元素定位失效；圆角需由父容器overflow: hidden裁剪，不能直接写在伪元素上
真正容易被忽略的是：伪元素方案和 postcss-px-to-viewport 是两条并行路径——一个管布局缩放，一个管像素精度。混用时若没用 selectorBlackList 隔离，会导致 vw 转换污染边框类，最终生成一堆不可控的 0.13333vw 边框，反而让问题更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
