移動端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);
    }
  }
}