SCSS无法动态适配DPR，因编译时不可知运行时devicePixelRatio；可行方案是用mixin封装伪元素+scale缩放，配合媒体查询和严格属性约束实现主流DPR兼容。
直接用 border: 1px 在高 DPR 设备上就是物理 2px 或 3px，这不是写法错，是浏览器按 devicePixelRatio 真实映射的结果；SCSS 本身不解决 DPR 适配，但它能帮你把缩放逻辑写得更可控、更少出错。
为什么不能在 SCSS 里直接写 border-width: 1px / $dpr
SCSS 是编译时处理，无法读取运行时的 window.devicePixelRatio。硬写 scale(1 / 2) 或 scale(0.333) 会失败——SCSS 不支持除法运算符用于数值计算（1/3 会被当作文本或报错），且不同设备的 DPR 不同（iPhone SE 是 2，iPhone 14 Pro 是 3，部分安卓机是 2.75），靠预设值无法全覆盖。
- 写
scale(1/3)→ 编译报错或被忽略 - 写
scale(0.333)→ 浮点精度误差导致缩放后仍为 1.5px 物理像素（尤其在 dpr=3 设备上） - 试图用
@if $dpr == 3→ $dpr 只是变量，不是运行时值，无法响应真实设备
::after + transform: scaleY() 的 SCSS 封装要点
真正可行的是用 SCSS 把伪元素缩放模式抽象成可复用的 mixin，但必须明确：它只生成固定缩放值（如 scaleY(0.5)），靠媒体查询兜底适配主流 DPR 场景，而非“动态适配”。
- 父元素必须有
position: relative，否则::after会脱离上下文定位 - 伪元素用
height: 1px; background-color，不用border-bottom—— 后者缩放后边缘易发虚 - 必须加
-webkit-transform前缀，iOS 12–15 对无前缀transform支持不全 -
transform-origin必须设为left bottom（下边框）或left top（上边框），否则缩放后线会飘起来
@mixin border-bottom-1px($color: #ddd) {
position: relative;
&::after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: $color;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
}
}
// 使用
.list-item {
@include border-bottom-1px(#eee);
}
全边框（border: 1px solid）的 SCSS 实现陷阱
全边框比单边更难控制，漏掉任意一个约束都会导致溢出、错位或圆角处断开。
立即学习“前端免费学习笔记（深入）”；
- 伪元素宽高必须设为
200%，否则缩放后四边不闭合 -
box-sizing: border-box必须显式声明，否则border: 1px会让实际尺寸多出 2px，缩放后仍溢出 -
transform-origin统一设为top left，配合scale(0.5)才能对齐左上角锚点 - 父容器需加
overflow: hidden，否则缩放后右/下边缘会多出半像素残留
@mixin border-all-1px($color: #ddd) {
position: relative;
overflow: hidden;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid $color;
box-sizing: border-box;
-webkit-transform: scale(0.5);
transform: scale(0.5);
-webkit-transform-origin: top left;
transform-origin: top left;
}
}
真正麻烦的不是写几行 SCSS，而是所有这些属性（position、overflow、box-sizing、transform-origin）必须同时生效，缺一不可；线上最常见的“边框断开”或“圆角消失”，八成是其中某一项漏了或者写错位置。
