如何画 0.5px 的线？

  1. 采用 meta viewport 的方式：initial-scale: 0.5；
  2. 采用 border-image 的方式；
  3. 采用 transform: scaleY(0.5) 的方式。

补充：几种方案对比：

  • initial-scale: 0.5：把整个页面等比缩小 0.5 倍，相当于把物理像素和 CSS 像素比例调整到 1:1，所有"1px"实际渲染为 0.5 物理像素；但会同时影响字体、间距等所有尺寸，不推荐。
  • transform: scaleY(0.5)：只对单个元素生效，结合媒体查询判断 dpr 是 2 还是 3： 
    .hairline::after {
  content: "";
  display: block;
  height: 1px;
  background: #000;
  transform: scaleY(0.5);
  transform-origin: 0 0;
}
  • border-image：用一张 1px 高的渐变图作 border-image-source，可避免模糊；但维护成本略高。

综合最推荐的是 媒体查询 + transform: scaleY，参考 css-064 中的完整代码。