1px在Retina屏上显示为2px是因设备像素比（dpr）≥2，CSS逻辑像素被映射到多个物理像素；常用解决方案是伪元素+transform: scale(0.5)并设transform-origin: 0 0，配合box-sizing: border-box防变形。
为什么1px在Retina屏上看起来像2px
因为高分屏（如iPhone、MacBook）的设备像素比（dpr）大于1，CSS中的1px被映射到多个物理像素。浏览器默认按dpr=2渲染时，1px实际占2个设备像素，视觉上变粗。这不是CSS写错了，是设备渲染机制导致的。
Less中用.hairline()混合器配合transform: scale()
核心思路：先写一个正常border: 1px，再对边框所在元素做反向缩放，让边框“压窄”。Less混合器能统一控制缩放比例和transform-origin，避免手动算偏移。
常见错误是只缩放不调整origin，导致边框位置偏移；或忘了重置box-sizing，缩放后内容区域变形。
-
.hairline(@color: #ccc, @dpr: 2)：参数化支持不同dpr值 - 必须设
transform-origin: 0 0（左上角），否则缩放中心不对，边框会“飘” - 外层容器需加
box-sizing: border-box，否则缩放后padding和border计算错乱 - 慎用于有子元素绝对定位的场景——缩放会影响子元素的
top/left计算基准
.hairline(@color: #ccc, @dpr: 2) {
position: relative;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 200%;
border: 1px solid @color;
transform: scale(0.5);
transform-origin: 0 0;
}
}
为什么不用border-image或background-image
这两种方案在Less里虽可封装，但兼容性差：border-image在iOS background-image用SVG或base64时，构建工具容易误处理URL路径，且无法响应dpr动态切换。而transform: scale()方案纯CSS驱动，Less编译后无运行时依赖，适配所有现代浏览器。
立即学习“前端免费学习笔记（深入）”；
注意：如果项目需支持IE，此方案不可用——IE不支持::after伪元素在inline元素上生效，且transform需加-ms-前缀，但缩放行为也不一致。
实际项目中@dpr怎么取值才靠谱
不能硬写死@dpr: 2。真实设备dpr有1、2、3、甚至4（如iPad Pro）。Less是编译时处理，没法运行时读window.devicePixelRatio，所以得靠构建流程配合媒体查询做多档输出。
- 推荐做法：用Webpack +
less-loader传入globalVars，根据构建目标（如npm run build:dpr3）注入不同@dpr值 - 更稳妥的是只针对
dpr >= 2生成一套样式，dpr=1设备直接走普通1px规则，避免过度优化 - 别在同一个CSS文件里用
@media (-webkit-min-device-pixel-ratio: 2)嵌套Less变量——Less不支持在@media内动态重定义变量
真正难的不是写出.hairline()，而是让设计师接受：所谓“视觉1px”，本质是妥协方案；它在不同缩放层级下仍可能轻微发虚，尤其斜线边框。
