Less中无法用变量动态生成DPR媒体查询，必须硬编码@media(-webkit-min-device-pixel-ratio:2)等档位；伪元素+scaleY方案可实现1px边框，需配合transform-origin和position:relative，且不支持动态插值。
直接写 border: 1px solid #ccc 在 iPhone 或安卓高 DPR 设备上必然变粗，这不是写错了，而是浏览器把 1 CSS 像素映射成了 2 或 3 物理像素。Less 里用 @mixin 封装方案能避免重复写媒体查询，但必须注意：Sass/Less 不支持动态生成媒体查询条件，所以得提前枚举常见 dpr 档位。
Less 中如何用 @mixin 封装伪元素 + scaleY 方案
核心是把边框逻辑抽成可复用的 mixin，只控制「画在哪」「缩多少」「原点在哪」。不能对整个元素缩放，否则内容会被压扁；必须作用于 ::after 或 ::before，且显式设 content: "" 和 position: absolute。
-
transform-origin必须匹配边框位置：下边框用bottom，上边框用top，全边框用left top - 缩放比例按
1 / dpr算：dpr=2 →scaleY(0.5)，dpr=3 →scaleY(0.333) - 父容器需设
position: relative，否则伪元素定位失效 - 若要支持圆角，伪元素需设
box-sizing: border-box并同步设置border-radius
示例 mixin：
.hairline-bottom() {
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background-color: #ccc;
transform-origin: bottom;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
&::after {
transform: scaleY(0.5);
}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
&::after {
transform: scaleY(0.333);
}
}
}
为什么不能用 @dpr: 2 动态拼媒体查询
Less 编译时无法将变量插入到 @media 条件中——@media (-webkit-min-device-pixel-ratio: @dpr) 会报错或被忽略。所有媒体查询必须硬编码档位，常见的是 2、2.5、3、3.5、4。
立即学习“前端免费学习笔记（深入）”；
- 只写
@media (-webkit-min-device-pixel-ratio: 2)覆盖不了部分华为/小米机型（dpr=2.75 或 3.5） - 加
(min-resolution: 192dpi)是为了兼容非 WebKit 内核（如 Firefox Android） - 不要依赖 JS 检测
window.devicePixelRatio后加 class，首屏渲染会有闪动
全边框与单边框的 mixin 写法差异
单边（如下边框）只需控制一个方向缩放；全边框则需双轴缩放 + 宽高翻倍，否则边框会断开或偏移。
- 下边框：
height: 1px+transform: scaleY(0.5) - 全边框：
width: 200%、height: 200%、border: 1px solid #ccc+transform: scale(0.5)+transform-origin: left top - 全边框必须加
box-sizing: border-box，否则伪元素自身边框会撑出额外 1px - 如果元素已有
::before（如 clearfix），只能用::after，反之亦然
容易被忽略的兼容性细节
Android 4.4+ 和 iOS 8+ 基本都支持 transform: scaleY()，但某些定制 ROM（如旧版 MIUI）对 transform-origin 解析异常，导致边框位置偏移 1px。
- 测试时务必在真机上验证，模拟器的 DPR 行为常不准确
- 避免在
overflow: hidden容器内使用该方案，缩放后的伪元素可能被裁剪 - 深色背景上用
box-shadow替代时，颜色会轻微发虚，这是抗锯齿导致，不是代码问题 - SVG base64 方案虽精准，但每个边框都要单独编码，维护成本远高于 Less mixin
真正难的不是写出一个能跑的 1px，而是让同一套样式在 dpr=2/2.5/3/3.5/4 的几十种设备上都不偏、不虚、不闪——这需要你手动补全媒体查询档位，而不是指望一个变量自动覆盖全部。
