伪元素+transform: scale()是解决Retina屏1px边框问题的最优方案，需严格设置position: relative、transform-origin（如下边框用0 100%）、pointer-events: none，并配合媒体查询适配DPR，避免使用border-width: 0.5px等不可控写法。
直接用 border: 1px 在 Retina 屏上永远达不到设计稿要求的 1 物理像素效果，SCSS 能帮你把缩放逻辑、DPR 判断和样式复用封装干净，但前提是写对关键参数——漏掉 transform-origin 或没设 pointer-events: none，真机上边框就错位或点不动。
SCSS mixin 必须包含的四个硬性参数
一个可用的 hairline-border mixin 不是简单套个 scaleY(0.5) 就完事。它得覆盖定位、缩放锚点、事件穿透和 DPR 条件判断：
-
position: relative必须加在父选择器上，否则::after会相对 body 定位 -
transform-origin必须显式写成0 100%（下边框）或0 0（四边），不能只写bottom或left top，iOS Safari 12–15 对简写支持差 -
pointer-events: none是安卓 WebView 下点击不丢失的底线，不加在某些 UC 内核里伪元素会吞 touch 事件 -
@media查询必须同时写(-webkit-min-device-pixel-ratio: 2)和(min-resolution: 192dpi)，只靠前者在部分 Android Chrome 上失效
如何用 SCSS 动态适配不同 DPR 值
硬写 scaleY(0.5) 只对 DPR=2 安全；DPR=3（如 iPhone 12+）需要 scaleY(0.333)，但 Safari 对 0.333 渲染不稳定，所以得兜底：
- 用
$dpr变量 +@if分支生成不同媒体查询，比如@if $dpr == 3 { transform: scaleY(0.333); } - DPR ≥ 3 场景建议 fallback 到
linear-gradient：用background: linear-gradient(to bottom, #ccc, #ccc) no-repeat left top / 1px 1px，避免缩放失真 - 别用
calc(1px / $dpr)直接算缩放值——SCSS 编译期无法读取运行时 DPR，那只是静态计算，毫无意义
为什么 border-width: 0.5px 不能进 SCSS mixin 主逻辑
很多团队图省事，在 mixin 里加一句 border-width: 0.5px 然后用媒体查询包裹，结果上线后安卓全系失效。原因很实在：
立即学习“前端免费学习笔记（深入）”；
-
getComputedStyle(el).borderWidth在 Android WebView 中普遍返回"1px"，哪怕你写了0.5px，浏览器底层已四舍五入 - iOS Safari 13+ 才开始有限支持，但 iOS 12 及更早版本（仍占存量 8% 左右）直接忽略，退回到 1px
- 伪元素方案绕过 border 解析链，靠
height: 1px+scaleY($ratio)控制最终物理像素数，这才是可控路径
圆角边框怎么处理才不露白
直接在伪元素上写 border-radius 会导致缩放后圆角变形、边缘发虚。正确做法是让父容器裁剪：
- 父元素设
border-radius: 8px+overflow: hidden - 伪元素保持矩形（
width: 200%; height: 200%），靠父容器的overflow把多余部分切掉 - 别给伪元素设
border-radius，否则scale(0.5)后弧度比例错乱，尤其在 DPR=3 时明显露白
真正难的不是写几个 @mixin，而是每次改完都得连真机看——模拟器里看不出 sub-pixel 插值是否激活，只有 Safari 开发者工具打开「Show Rasterization Borders」，看到边框周围没有半透明描边，才算落到了物理像素网格上。
