简述如何解决移动端 Retina 屏 1px 像素问题 ？

移动端 Retina 屏的 1px 像素问题通常出现在高分辨率的设备上，如 iPhone 的 Retina 屏或一些高分辨率的 Android 设备。由于这些设备的像素密度较高，如果按照传统的 1px 来显示，可能会显得过于细小，影响用户体验。

解决这个问题的方法主要有两种：

1. 使用 CSS 的媒体查询和 transform 属性：这种方法主要是利用 CSS3 的媒体查询和 transform 属性，根据设备的像素密度来设置不同的边框宽度。例如，对于像素密度为 2 的设备，我们可以将边框宽度设置为 0.5px，而对于像素密度为 3 的设备，我们可以将边框宽度设置为 0.3333px。这样，在不同分辨率的设备上，边框的显示效果都会比较理想。

示例代码：

.border {
  border: 1px solid #999;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border {
    border: 0.5px solid #999;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border {
    border: 0.3333px solid #999;
  }
}

2. 使用 JavaScript 检测并动态设置 CSS 类：这种方法主要是利用 JavaScript 来检测浏览器是否支持 0.5px 的边框设置。如果支持，就给 HTML 元素添加一个特定的 CSS 类，然后在 CSS 中为这个类设置 0.5px 的边框宽度。如果不支持，就保持默认的 1px 边框宽度。这种方法可以确保在不同的设备和浏览器上，边框的显示效果都会比较一致。

示例代码：

if (window.devicePixelRatio && devicePixelRatio >= 2) {
  var testElem = document.createElement('div');
  testElem.style.border = '.5px solid transparent';
  document.body.appendChild(testElem);
  if (testElem.offsetHeight == 1) {
    document.querySelector('html').classList.add('hairlines');
  }
  document.body.removeChild(testElem);
}

.hairlines .border {
  border: 0.5px solid #999;
}

这两种方法都可以有效地解决移动端 Retina 屏的 1px 像素问题，具体选择哪种方法取决于你的项目需求和开发习惯。