1px在retina屏上因dpr=2导致占2物理像素而变粗发虚，需用transform:scale(0.5)配合伪元素和整数定位实现物理像素对齐，辅以运行时0.5px支持检测、bfc清除浮动及text-size-adjust锁死字体缩放。
直接写 1px 在 Retina 屏上不是“偏移”，而是渲染单位错配——1px CSS 像素在 dpr=2 设备上实际占 2 物理像素，导致线条粗、位置虚、边缘毛刺。这不是 bug，是设备像素比（devicePixelRatio）的必然表现，必须按物理像素对齐逻辑来处理。
为什么 transform: scale(0.5) + :after 能稳定对齐
伪元素先画出 1px 边框（逻辑像素），再用 transform: scale(0.5) 缩放到物理像素级精度，配合 transform-origin: 0 0 确保缩放锚点不漂移。关键点在于：
-
::after必须设position: absolute，且top/left/bottom/right值为整数（如bottom: 0），避免 sub-pixel 计算 - 父元素需有
position: relative，否则伪元素定位上下文丢失 - 缩放后若出现模糊，加
will-change: transform或backface-visibility: hidden触发硬件加速 - 不要对含文字的容器整体缩放，否则字体也会变小；只缩放纯边框层
media query 中 0.5px 不生效？检查浏览器支持边界
0.5px 仅在 iOS 8+ 和部分 macOS Safari 中被原生支持，Android WebView、旧版 UC、微信 X5 内核等仍会四舍五入为 0px 或 1px。别依赖以下写法：
@media (-webkit-min-device-pixel-ratio: 2) {
.border { border-width: 0.5px; }
}
真正可靠的判断方式是运行时检测：
- 创建一个
div，设style.border = '0.5px solid transparent' - 插入 DOM 后读取
offsetHeight，等于1才说明支持 - 只在检测通过时给
加hairlines类，CSS 写成.hairlines .border { border-width: 0.5px; } - 检测脚本必须放在
内（非），否则offsetHeight读不到渲染值
定位偏移 + 1px 粗线同时出现？大概率是浮动或塌陷引发的亚像素连锁反应
当 float 元素没清干净，父容器高度塌陷，后续元素 baseline 计算就会失准，在高 DPR 下表现为“边框下沉半像素”“顶部留白不一致”。这不是边框本身的问题，而是布局流断裂。必须同步处理：
- 父容器用
display: flow-root替代传统伪元素清除，它能强制生成 BFC 且不引入额外行高 - 所有浮动子项的
height、line-height、margin必须是整数（禁止20.5px） - 加
transform: translateZ(0)强制 GPU 合成，让浏览器以 device pixel 为单位重绘边界 - 如果用了
calc(50% - 1px)做宽度容错，确保减去的是整数px，而非0.5px（后者在低版本安卓会解析异常）
最易被忽略的一点：font-size 的系统缩放会影响整个布局基线。iOS「更大字体」开启时，16px 可能渲染为 18.2px，连带 line-height、padding 全部变成非整数——此时哪怕边框对齐了，视觉上依然“错位”。务必在根节点加 text-size-adjust: 100% 锁死缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
