最优解是伪元素配合transform:scale(1/dpr)缩放，需设transform-origin和pointer-events:none，因1px在高dpr屏被映射为多个物理像素而变粗。
直接写 border: 1px solid #ccc 在 iPhone 或安卓高 DPR 设备上必然变粗，这不是写错了，而是浏览器把 1 CSS 像素映射成了 2 或 3 物理像素——必须用伪元素 + transform: scale() 模拟视觉上的 1px。
为什么不能只靠媒体查询改 border-width
因为 0.5px 仅 iOS Safari 部分支持（且需配合 -webkit-appearance: none 用于表单），安卓几乎全不认；border-image 和 background-image 方案在构建时容易误处理路径，也无法响应不同 DPR 动态切换。而 transform: scale() 是纯静态 CSS 行为，Less 编译后无运行时依赖，iOS 8+/Android 4.4+ 全兼容。
-
border-width的最小有效单位是 1px，低于它会被四舍五入或忽略 - 媒体查询只能匹配档位（如
@media (-webkit-min-device-pixel-ratio: 2)），不能动态算出缩放比 - 缩放必须作用于伪元素，不能缩放整个元素，否则内容文字/图标也会被压扁
如何封装可复用的 .hairline() Mixin
核心逻辑：用 ::after 画一个双倍尺寸的边框，再按 1 / dpr 缩放，同时用 transform-origin 锚定缩放基点。父容器必须设 position: relative，否则伪元素定位失效。
- 只控制「画在哪」：下边框用
bottom: 0+border-top，上边框用top: 0+border-bottom，全边框则用top: 0; left: 0; width: 200%; height: 200% - 缩放比例硬编码：dpr=2 →
scaleY(0.5)，dpr=3 →scaleY(0.333)，不能用变量插值（Less 不支持运行时计算媒体查询条件） - 必须加
pointer-events: none，避免伪元素拦截点击 - 若需圆角，伪元素要同步设
box-sizing: border-box和border-radius，并在高 DPR 媒体查询中等比放大border-radius
.hairline(@color: #ccc, @position: bottom) when (@position = bottom) {
position: relative;
&::after {
content: "";
pointer-events: none;
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid @color;
transform: scaleY(0.5);
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);
}
}
}
使用时最容易漏掉的三件事
很多项目调了 mixin 却还是看到 2px 边框，问题往往不在逻辑，而在上下文缺失。
- 忘了给宿主元素加
position: relative—— 伪元素会脱离文档流飞到 body 底部 - 用了
transform: scale(0.5)却没配transform-origin—— 缩放后边框整体上移或左偏，看起来像“断了” - 在 flex 容器里直接用，没处理
flex-shrink: 0—— 伪元素宽高被压缩，缩放失真
要不要支持全方向边框和圆角
支持可以，但得拆成多个参数，不能一股脑塞进一个 mixin。比如 .border-1px(@color, @radius, @direction: bottom)，其中 @direction 控制画哪几条边，@radius 只在 @direction: all 时生效。
- 全边框方案必须用
width: 200%; height: 200%+transform-origin: left top，否则缩放后边框错位 - 圆角值在高 DPR 下要等比放大：
@media (min-resolution: 2dppx) { border-radius: @radius * 2; } - 如果项目已用 PostCSS，更推荐用
postcss-pxtorem或postcss-plugin-1px自动注入，比手写 mixin 更省心
真正难的不是写出能跑的 mixin，而是每次使用时都记得检查父元素定位、伪元素基点、以及是否被 flex/grid 的隐式行为干扰——这些细节一漏，1px 就立刻变回 2px。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
