1px 的问题

1px 的应用场景

1. 细边框：

   • 在设计稿中，设计师通常会指定 1px 的边框，但在高分辨率屏幕上，直接使用 1px 可能会导致边框看起来比实际更粗。
   • 例如，按钮、输入框、卡片等元素的边框。

2. 分割线：

   • 在列表、表格或布局中，常常需要使用细线来分隔内容。直接使用 1px 可能会导致分割线看起来不够细。

3. 阴影和细节：

   • 在某些设计中，阴影或细节部分需要非常精细的线条，直接使用 1px 可能会导致效果不符合预期。

1px 问题的出现原因

1. 设备像素比（Device Pixel Ratio, DPR）：

   • 设备像素比是物理像素与CSS 像素的比值。例如，DPR 为 2 的设备，1 个 CSS 像素对应 2x2 的物理像素。
   • 在高 DPR 设备上，1px 的边框实际上会被渲染为多个物理像素，导致看起来比设计稿更粗。

2. 屏幕分辨率：

   • 高分辨率屏幕（如 Retina 屏幕）的像素密度更高，1px 的边框在视觉上会显得更粗。

3. 视觉目标不同：

   • 设计稿里的“1 像素线”很多时候指的是接近 1 个物理像素的发丝线，而 CSS 里的 1px 指的是 1 个 CSS 像素，两者并不总是等价。

常见方案

1. 使用伪元素 + transform: scale

通过缩放伪元素来模拟更细的边框：

.border-1px {
  position: relative;
}
.border-1px::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}

2. 直接使用半像素能力

部分现代浏览器在高 DPR 设备上可以较好渲染 0.5px 边框：

.border-hairline {
  border-bottom: 0.5px solid #ddd;
}

这种方式最简单，但实际效果仍取决于浏览器和设备。

3. 使用 box-shadow 模拟细边框

.border-1px {
  box-shadow: 0 0 0 0.5px #000;
}

4. 使用 border-image

使用图片或渐变做边框，可以实现更可控的视觉效果：

.border-1px {
  border-width: 1px;
  border-image: url(border.png) 2 stretch;
}

5. 使用 SVG

使用 SVG 绘制细线，SVG 是矢量图形，可以适配不同分辨率：

<svg height="1" width="100%">
  <line x1="0" y1="0" x2="100%" y2="0" stroke="#000" stroke-width="0.5" />
</svg>

不建议的方案

通过修改 viewport 的 initial-scale 来“适配 1px” 属于早期移动端方案：

• 会影响整个页面缩放逻辑。
• 会影响布局和交互行为。
• 常常伴随 user-scalable=no，对可访问性不友好。

现在通常不建议再用它来解决发丝线问题。

怎么选

• 普通业务页面优先尝试 0.5px 或伪元素缩放方案。
• 对视觉一致性要求高时，可以考虑 SVG 或更可控的装饰方案。
• 不要把“发丝线”问题和响应式单位换算混为一谈，rem、vw 并不能直接解决边框视觉粗细问题。