flex布局高dpi屏“1px缝隙”是子元素宽度四舍五入累计误差所致，非代码错误；需用window.devicepixelratio确认dpr，getboundingclientrect验证实际像素占用，并以伪元素+scaley(0.5)替代border/gap。
Flex布局在高DPI屏上出现的“1px缝隙”，不是代码写错了，而是浏览器把子元素宽度四舍五入到整数物理像素时，多个项累计误差导致的视觉漏光。直接检查window.devicePixelRatio和元素渲染边界就能定位。
确认当前设备DPR是否触发亚像素问题
打开控制台运行console.log(window.devicePixelRatio)。返回值为2、3或1.5时，说明已进入高分渲染模式——此时所有基于px的尺寸（包括gap、border、width）都可能因浮点计算+舍入而错位。注意：Windows缩放125%时DPR可能是1.25，不是整数，也一样会出缝隙。
- 别信系统显示的“分辨率”，MacBook Pro 16" 始终是
dpr === 2，和屏幕物理分辨率无关 - 某些安卓WebView会伪造
dpr，建议交叉验证：screen.width / window.innerWidth - 刷新页面后
dpr可能变化（比如从1.5跳到2），缝隙也会跟着出现或消失
用getBoundingClientRect检查Flex项是否真正填满容器
选中疑似有缝隙的Flex子项，在控制台执行el.getBoundingClientRect()，对比right - left与父容器clientWidth。若差值在0.3–0.8之间，基本确认是亚像素舍入误差——例如父容器宽375px（CSS像素），4个等分子项理论各93.75px，但浏览器可能全向下取整为93px，总和只剩372px，留下3px空隙。
- Safari对这种误差最敏感，尤其在
flex-wrap: wrap换行时 - 不要只看DevTools里“Computed”面板的width值，它显示的是逻辑值，不是最终渲染像素
- 开启Chrome DevTools → Rendering → “Show rasterization borders”，看到半透明描边就代表sub-pixel已激活
替换gap和border为伪元素+scaleY方案
gap和border在高DPR下会随DPR放大，但伪元素+transform: scaleY(0.5)能稳定落到1物理像素。关键不是“加了伪元素”，而是约束它的渲染锚点和尺寸来源。
- 必须设
position: relative在父元素上，否则::after会脱标到body - 伪元素用
height: 1px; background-color，不用border-bottom——后者受box-sizing和line-height干扰 -
transform-origin: left bottom必须写全，Safari不认bottom关键词 - 如果父容器有
overflow: hidden，需加z-index: 1或调高height防裁剪
避免flex-shrink压缩图片/文字导致的间隙错位
当Flex容器内含img或span时，flex-shrink: 1（默认值）会让它们被强制压缩，造成object-fit裁剪失真或文字基线偏移，间接暴露缝隙。这不是gap没生效，而是内容本身变形了。
- 图片务必加
flex-shrink: 0或flex: 0 0 auto，再配width: 100%和aspect-ratio - 文字容器若设了
font-size: 14.5px，在DPR=2下实际渲染为29物理像素，但可能被舍入成28或30，引发baseline错位 - 慎用
rem单位定义gap——根字号浮动会导致gap值漂移，优先用px或clamp(0.5px, 2vw, 1px)
真正难处理的不是缝隙本身，而是它只在特定窗口宽度、特定DPR、特定浏览器组合下才出现，且每次调整都可能转移位置。排查时一定要先锁定dpr，再用getBoundingClientRect看真实像素占用，最后才动样式——否则容易把渲染问题当成布局问题去修。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
