移动端的边框1像素处理问题

移动端的边框1像素处理问题

/* 基础样式 */
.border-1px {
  position: relative;
}
.border-1px::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: #000;
}
​
/* DPR = 1 的设备 */
@media screen and (-webkit-min-device-pixel-ratio: 1),
       screen and (min-resolution: 1dppx),
       screen and (min-resolution: 96dpi) {
  .border-1px::after {
    transform: scaleY(1);
  }
}
​
/* DPR = 2 的设备 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
       screen and (min-resolution: 2dppx),
       screen and (min-resolution: 192dpi) {
  .border-1px::after {
    transform: scaleY(0.5);
  }
}
​
/* DPR = 3 的设备 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
       screen and (min-resolution: 3dppx),
       screen and (min-resolution: 288dpi) {
  .border-1px::after {
    transform: scaleY(0.33);
  }
}