移动端实现1px边框

-由于设备像素比存在的原因，我们在处理设计图的一些边框时，对于1px的border，如果在代码里将其写死，可能在不同设备像素比的设备中，粗细不一样，尤其是在目前大多数设备像素比为2的设备中，过粗。
那么利用媒体查询和”min-device-pixel-ratio”就可以轻松的搞定，实现货真价实的1px border。

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

使用媒体查询技术`;
注意这里min-device-pixel-ratio的定义，其实就是等于
window.devicePixelRatio，是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

@media (-webkit-min-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-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
 .border-1px::after{
       -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)
  }
}