高清屏上border变粗是因dpr≥2时1px CSS像素对应多个物理像素；解决方案是用伪元素+transform scaleY(1/dpr)模拟0.5px，需兼容缩放基点、硬件加速及构建工具配置。
为什么直接写 border: 1px solid #ccc 在高清屏上会变粗
移动端 Retina 屏（dpr ≥ 2）下，CSS 像素和物理像素不是 1:1 映射。浏览器把 1px 的 CSS 边框渲染成 2 物理像素宽，视觉上就“变粗了”。这不是 bug，是设备缩放行为导致的必然结果。
常见错误现象：border: 1px solid #ddd 在 iPhone 上看起来像 2px，和设计稿对不上；用 border: 0.5px solid #ddd 则多数安卓机不支持（仅部分 iOS Safari 支持，且需 -webkit-appearance: none 配合表单元素）。
所以得绕开“写死像素值”的思路，改用 transform 缩放伪元素来模拟视觉上的 1px。
Less 中封装 hairline Mixin 的标准写法
核心是：用 ::after 伪元素画一个 2px 高/宽的边框，再用 transform: scaleY(0.5)（或 scaleX）压扁它。配合 transform-origin 控制缩放基点，避免偏移。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 统一用
position: relative触发定位上下文，否则伪元素无法精确定位 - 伪元素必须设
content: ""，否则不渲染 -
transform: scaleY(0.5)要加-webkit-transform兼容旧 iOS - 为避免模糊，强制开启硬件加速：
transform: scaleY(0.5) translateZ(0) - dpr 为 3 的设备（如部分华为/三星）需用
scaleY(0.33)，但实际项目中通常只区分 dpr=2 和 dpr≥3 两档
示例 Mixin：
.hairline(@color: #e5e5e5, @direction: bottom) when (@direction = bottom) {
position: relative;
&::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: @color;
transform: scaleY(0.5);
transform-origin: 0 0;
-webkit-transform: scaleY(0.5);
}
}
如何自动适配不同 dpr 设备的缩放比例
硬编码 scaleY(0.5) 只适用于 dpr=2。要真正适配，得在 JS 注入 dpr 值到 HTML 标签，再用 Less 的 ~"calc()" 或媒体查询兜底——但 Less 本身不读取运行时 dpr，所以更可靠的做法是：用 JS 动态写 data-dpr，再配合 CSS 自定义属性 + calc() 实现响应式缩放。
不过对于 Less 工程，更现实的方案是分条件编译：
- 开发时通过构建脚本注入
@dpr: 2或@dpr: 3变量 - Mixin 内部用
scaleY(1 / @dpr)计算缩放值 - 或者直接提供两个 Mixin：
.hairline-2x()和.hairline-3x()，按需调用 - 避免在 Mixin 里用
@media (-webkit-min-device-pixel-ratio: 3)—— Less 不支持嵌套媒体查询动态计算
注意：transform: scale() 缩放后，如果父容器有 overflow: hidden，可能裁掉半像素边框，此时需微调伪元素的 top/bottom 值（比如 bottom: -1px）来补偿。
使用 .hairline Mixin 时容易忽略的细节
很多人套了 Mixin 就以为完事，结果在真机上还是发虚或错位。关键问题不在缩放逻辑，而在渲染上下文：
- 父元素不能有
transform（比如translateZ(0)），否则会创建新的层叠上下文，导致伪元素缩放失准 - 伪元素的
z-index必须高于内容，否则被遮盖；但又不能设太高，避免干扰其他绝对定位元素 - 圆角场景下，
border-radius不能直接加在伪元素上——缩放会扭曲弧度，应改用overflow: hidden+ 子容器圆角 - 左右边框用
scaleX()时，transform-origin必须设为left top或right top，否则缩放中心偏移 - Webpack/Vite 构建时若启用了 CSS 压缩（如 cssnano），可能把
transform: scaleY(0.5)错误合并成transform: scale(0.5)，丢失方向性，需配置cssnano的mergeLonghand: false
最稳妥的收尾方式：所有 .hairline 类都加 box-sizing: border-box，并确保调用处没有意外的 zoom、transform 或 perspective 干扰。
