移动端1px边框问题

用于手机端受dpr的影响，实际开发中，PC端和移动端展示的效果不太一样，往往在PC端显示的是1px，移动端常常是偏粗一些。

解决办法：

　　主要是用到伪类及缩放。在需要画边框的元素上，设置一个伪类，它的伪类相对于这个元素是一个绝对定位，通过伪类画一个1px边框，然后把它定位到元素的下面，就变成一个下边框。

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

　　然后把应用这个class，去把这个伪类进行缩放，根据设备的最小dpr，比如1.5，就缩放0.75倍；dpr为2，就缩放0.5倍。

@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)