高分屏1px缝隙是因高dpi下亚像素渲染导致，dpr非整数时border等产生模糊或漏光；推荐用伪元素+transform: scaley(0.5)模拟视觉1px，并注意transform-origin及overflow处理。
为什么高分屏上会出现1px缝隙
这不是CSS写错了，而是浏览器在高DPI设备上对border、box-shadow或transform: scale()的亚像素渲染导致的视觉残留。比如border: 1px solid #000在dpr=2的屏幕上实际被渲染为2物理像素，但若父容器宽度是奇数CSS像素（如375px），内部元素计算后可能落在0.5物理像素边界，造成反锯齿模糊或漏光缝隙。
用window.devicePixelRatio确认当前渲染精度
直接在控制台运行：console.log(window.devicePixelRatio)。若返回2或3，说明已进入高分渲染模式；此时所有基于px的硬边框、分割线、栅格线都可能暴露亚像素问题。
- 别信“屏幕分辨率”数字——MacBook Pro 16" 是3072×1920，但
dpr恒为2；Windows 4K屏缩放125%时dpr可能是1.25或1.5，不是整数 -
dpr值会随系统缩放设置动态变化，刷新页面后可能不同 - 某些安卓WebView或旧版iOS Safari会伪造
dpr，需配合screen.width / window.innerWidth交叉验证
替换1px边框为transform: scaleY(0.5)
这是目前最稳定、无需媒体查询的方案：用伪元素模拟“视觉1px”，避开浏览器对border的亚像素插值。
/* 错误示范：直接写1px */
.separator { border-bottom: 1px solid #eee; }
<p>/<em> 正确做法：用伪元素+缩放 </em>/
.separator {
position: relative;
}
.separator::after {
content: '';
position: absolute;
left: 0; bottom: 0; right: 0;
height: 1px;
background-color: #eee;
transform: scaleY(0.5);
transform-origin: 0 0;
}</p>
- 必须加
transform-origin: 0 0，否则在右对齐或rtl布局中会偏移 - 不要用
scale(0.5)——它会同时缩放X/Y，导致水平线变虚 - 若容器有
overflow: hidden，需确保伪元素不被裁剪（加z-index或调整height）
检查flex和grid间隙是否被gap撑开
当使用display: flex或display: grid时，gap属性在高分屏下可能因四舍五入产生0.3px级误差，尤其在gap: 1rem且html根字号被dpr放大后。
- 优先用
gap: 1px代替gap: 1rem处理微间隙——rem会随dpr浮动，px在CSS像素层更可控 - 若必须用rem，请在JS中动态设置
document.documentElement.style.fontSize = 16 * window.devicePixelRatio + 'px'，再配gap: 1rem保持比例 - 避免
justify-content: space-between搭配奇数子元素——最后一个元素可能被挤到非整数位置
真正难搞的是那些没报错、没警告、连DevTools里都看不出异常的缝隙——它们只在特定dpr+特定缩放+特定滚动位置下闪现。上线前务必在真实设备（不止是Chrome模拟器）上用手指拖动页面，观察边缘线条是否连续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
