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. 浏览器渲染机制：

   • 浏览器在渲染 1px 边框时，可能会对其进行抗锯齿处理，导致边框看起来模糊或变粗。

解决 1px 问题

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. viewport：通过动态设置 viewport 的 initial-scale 来适配 DPR

   <meta
     name="viewport"
     content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no"
   />

3. 使用 border-image：使用图片作为边框，可以实现更精细的效果：

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

4. 通过 box-shadow 模拟细边框：

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

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>

6. 在构建工具中，使用插件将 px 转换为 vw 或 vh，或者 rem 以适配不同屏幕：