如何在移动设备上使用 05px

1. 在非高分辨率的屏幕上，0.5px 可能会被四舍五入到 1px 或完全忽略。
2. 在高分辨率（例如 Retina 屏幕）的设备上，0.5px 可能会渲染得很细，但在标准分辨率的屏幕上可能看不到。

使用媒体查询

根据设备的像素比 (devicePixelRatio) 使用媒体查询来应用不同的样式。例如，对于高分辨率的屏幕，你可以设置边框为 0.5px，而对于标准分辨率的屏幕，你可以设置为 1px。

/* 默认样式（针对非高分辨率屏幕） */
.border {
  border: 1px solid #000;
}

/* 针对高分辨率屏幕的样式 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .border {
    border: 0.5px solid #000;
  }
}

使用伪元素

使用伪元素（例如 ::before 或 ::after）创建边框效果。你可以设置伪元素的高度或宽度为 1px，然后使用缩放 (scale) 转换来调整大小。

.border::after {
  content: "";
  display: block;
  height: 1px;
  background-color: #000;
  transform: scaleY(0.5);
}