SCSS无法用$dpr动态计算缩放值，因其编译时特性与JS运行时的window.devicePixelRatio完全隔离，且不支持浮点除法运算，硬写scale(0.333)会因精度问题导致iPhone 14 Pro等设备出现1.5px残留。
为什么不能用 $dpr 变量动态计算缩放值
SCSS 是编译时语言，window.devicePixelRatio 是运行时 JS 值，两者完全隔离。写 @if $dpr == 3 或 scale(1 / $dpr) 都无效——前者只是静态比较，后者会报错或被当作文本字面量。更关键的是，1/3 在 SCSS 中不是数值除法（Sass 不支持运行时浮点运算），硬写 scale(0.333) 还会因精度问题导致缩放后残留 1.5px 物理像素，在 iPhone 14 Pro 上尤其明显。
@mixin border-bottom-1px 必须带的 5 个约束条件
这个 mixin 看似简单，漏掉任意一条都会在真机上出视觉 bug：
- 父元素必须声明
position: relative，否则::after会脱离定位上下文 -
::after必须用height: 1px; background-color，禁用border-bottom: 1px——后者缩放后边缘发虚 -
transform-origin必须显式设为left bottom（或0 100%），否则默认中心缩放会让线往上飘 - 必须加
-webkit-transform和-webkit-transform-origin前缀，iOS 12–15 对无前缀支持不全 -
::after要加pointer-events: none，否则会拦截点击事件
四边 1px 边框的 @mixin border-1px 容易踩的盒模型坑
单边好办，四边一起上就极易溢出或错位。核心矛盾是：缩放前伪元素尺寸必须撑开，缩放后才能精准贴合。
- 伪元素宽高必须设为
width: 200%; height: 200%，再配transform: scale(0.5)，否则四角断开 - 必须紧跟
box-sizing: border-box，否则默认content-box会让边框外扩，缩放后右侧/底部多出半像素黑线 -
transform-origin改为0 0（左上角），避免内容区域变化导致缩放锚点漂移 - 若父容器有
overflow: hidden，需确认伪元素是否被裁——因为缩放基于原始 200% 尺寸，坐标系未同步收缩
媒体查询不能靠 SCSS 动态生成，但可以预定义主流档位
SCSS 不支持 @media (min-resolution: #{192 * $dpr}dpi) 这类插值写法。可行做法是用 @each 显式列出常见 DPR 档位，并绑定对应缩放值：
@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-origin: left bottom;
transform-origin: left bottom;
pointer-events: none;
}
<p>@each $dpr, $scale in (2: 0.5, 3: 0.333) {
@media (-webkit-min-device-pixel-ratio: $dpr), (min-resolution: #{96 * $dpr}dpi) {
&::after {
-webkit-transform: scaleY($scale);
transform: scaleY($scale);
}
}
}
}</p>
注意：96 * $dpr 是标准换算（1dppx = 96dpi），别写成 192 或 288 ——那是旧式写法，现代 Chrome/Firefox 已统一按 96dpi 基准解析。
真正难的不是写出某个 scale 值，而是区分当前模糊是来自设备 DPR 还是用户主动缩放（比如 Chrome 按 Ctrl+滚轮）。后者会让 transform 被二次缩放，整个方案失效。这时候得切到 border-image + linear-gradient 这类不依赖缩放的 fallback 路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
