1px 边框问题
设计稿上的 1px 边框在 DPR=2/3 的手机上其实用 2~3 个物理像素渲染，反而显得更粗；而代码里写 1px 的设备像素又太细。所以“1px 边框问题”是“如何用 CSS 画出物理 1px 的细线”。
主流解法：transform: scaleY(0.5) 伪元素画线（兼容性好），或直接用 0.5px（iOS 支持已普及）。
- 本质：CSS 1px ≠ 物理 1px，需要 DPR 换算
- 方案 A：::after 伪元素 + scaleY(0.5)，兼容性最好
- 方案 B：直接 1px + 媒体查询写 0.5px（Safari 14+ 支持）
CSS
/* 方案 A：伪元素缩放（推荐，全平台兼容） */ .hairline-bottom { position: relative; } .hairline-bottom::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #ddd; transform: scaleY(0.5); /* DPR=2 时恰好物理 1px */ transform-origin: 0 0; } /* DPR=3 的屏幕再细一点 */ @media (-webkit-min-device-pixel-ratio: 3) { .hairline-bottom::after { transform: scaleY(0.33); } } /* 方案 B：直接 0.5px */ @media (-webkit-min-device-pixel-ratio: 2) { .border-half { border-width: 0.5px; } }
本节要点1px 边框：伪元素 scaleY(0.5) 是最稳方案；DPR 越高缩放越狠。
