移动端border：1px问题解决方案

了解设备像素和css像素的因该知道，通常我们在写移动端时，是按照设计稿标注的像素除以设备的DPR来写真实的像素，

比如在iPhone6上，我们写的20px字体世界上在视觉效应上有20px;

所以当我们写1px边框时，在手机上看起来会变粗变为2px；

对此有如下解决方案：

.border-1px(@color){
  position:relative;
  &::after{
    display: block;
    position: absolute;
    left:0;
    bottom:0;
    border-top:1px solid @color;
    width:100%;
    content:' ';

  }
}
@media (-webkit-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.7);
      transform: scaleY(0.7);
    }
  }
}
@media (-webkit-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}
@media (-webkit-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) {
  .border-1px{
    &::after{
      -webkit-transform: scaleY(0.33);
      transform: scaleY(0.33);
    }
  }
}