移动端1px问题的解决

一，原理

实际上是利用伪元素，创建一个容器，设备像素比是多少就设置为多大的。然后边框设置为1px，再将这整个伪元素的大小缩放设备像素比倍。这样就得到合适的1px。

二，代码实现

/*手机端实现真正的一像素边框*/
.border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
  position: relative;
}
/*线条颜色 黑色*/
.border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
  background-color: #eeeeee;
}
/*底边边框一像素*/
.border-bottom-1px::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  transform-origin: 0 0;
}
/*上边边框一像素*/
.border-top-1px::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform-origin: 0 0;
}
/*左边边框一像素*/
.border-left-1px::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  transform-origin: 0 0;
}
/*右边边框1像素*/
.border-right-1px::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  height: 100%;
  transform-origin: 0 0;
}
/*边框一像素*/
.border-1px::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #eeeeee;
}
/*设备像素比*/
/*显示屏最小dpr为2*/
@media (-webkit-min-device-pixel-ratio: 2) {
  .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.5);
  }
  .border-left-1px::after, .border-right-1px::after {
    transform: scaleX(0.5);
  }
  .border-1px::after {
    width: 200%;
    height: 200%;
    transform: scale(0.5);
    transform-origin: 0 0;
    pointer-events: none;
  }
}
/*设备像素比*/
@media (-webkit-min-device-pixel-ratio: 3)  {
  .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.333);
  }
  .border-left-1px::after, .border-right-1px::after {
    transform: scaleX(0.333);
  }
  .border-1px::after {
    width: 300%;
    height: 300%;
    transform: scale(0.333);
    transform-origin: 0 0;
    pointer-events: none;
  }
}

然后需要1px边框的地方：

 <div class="img-box border-1px">
   <span :class="[item1.imageRef, 'item-image']"></span>
 </div>

而对于有圆角的，基于我们的原理，圆角应该对应放大几倍，这样缩小回去之后才能一致，比如说圆角26px的时候，就需要：

/*设备像素比*/
/*显示屏最小dpr为2*/
@media (-webkit-min-device-pixel-ratio: 2) {
  .border-1px::after {
    border-radius: 52px;
  }
}
/*设备像素比*/
@media (-webkit-min-device-pixel-ratio: 3) {
  .border-1px::after {
    border-radius: 78px;
  }
}