retina屏上border变粗是因dpr导致1px css像素映射多物理像素；应使用伪元素+transform scaley配合媒体查询适配，而非postcss-pxtorem。
为什么直接写 border: 1px solid #ccc 在 Retina 屏上变粗
因为高 DPI 屏幕（如 iPhone 的 @2x/@3x）会把 1px CSS 像素映射到多个物理像素，浏览器默认做缩放渲染，导致视觉上“1px”实际占 2px 或 3px 物理宽度。这不是 bug，是设备像素比（window.devicePixelRatio）和 CSS 像素单位的天然关系。
PostCSS 本身不解决这个问题，但它能帮你自动化注入适配逻辑——关键不是 PostCSS，而是配合它使用的插件和你写的规则是否覆盖了真实场景。
用 postcss-pxtorem 不行，得换 postcss-plugin-px2viewport 或手写媒体查询
postcss-pxtorem 是为 rem 布局服务的，它把 px 转成 rem，但对 1px 边框无感：rem 缩放后边框依然会被 DPR 放大。真正起作用的是针对视口宽度 + DPR 的双重条件处理。
- 推荐用
postcss-plugin-px2viewport并开启unitPrecision: 6和viewportWidth: 375（按设计稿宽度），它能把1px转成类似0.002666vw这种值，在高 DPR 下更接近物理 1px - 更稳妥的做法是手动写媒体查询：
@media (-webkit-min-device-pixel-ratio: 2)内用transform: scaleY(0.5)缩放伪元素画线 - 别用
border-image方案——iOS Safari 对 border-image 的 subpixel 渲染支持不稳定，容易发虚或错位
最简可行方案：伪元素 + transform + PostCSS 自动补全
写一次 CSS，让 PostCSS 帮你自动加 -webkit- 前缀和多倍率媒体查询。你需要两个插件：postcss-preset-env（处理媒体查询语法） + autoprefixer（补前缀）。
示例写法：
.line::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ddd;
transform-origin: 0 0;
}
@media (-webkit-min-device-pixel-ratio: 2) {
.line::after {
transform: scaleY(0.5);
}
}
@media (-webkit-min-device-pixel-ratio: 3) {
.line::after {
transform: scaleY(0.333333);
}
}
注意：必须用 transform，不能用 height: 0.5px——CSS 不支持小数 px 单位在所有安卓 WebView 中生效；scaleY 是唯一跨端可靠的降维方式。
上线前必须验证的三个点
很多团队写了方案却线上翻车，问题往往出在构建链路或运行时环境上：
- 检查构建产物中是否真生成了
@media (-webkit-min-device-pixel-ratio: 2)——某些 PostCSS 配置会过滤掉非标准媒体查询，需确认postcss-preset-env的stage设为 0 或显式启用customMedia - 确保页面
<meta name="viewport">设置正确：width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no，否则 DPR 检测失效 - iOS 16+ Safari 对
transform: scaleY(0.5)在 fixed 容器里有重绘 bug，如果线在position: fixed区域，改用top: 0; transform: scaleX(0.5)横向画线再旋转
物理 1px 不是靠一个插件一劳永逸的事，它卡在 CSS 单位、设备像素比、浏览器渲染管线三者的交界上——每次升级 iOS 或安卓 WebView，都可能要重新测一遍伪元素的 transform 行为。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
