移动端(手机)1像素边框真正实现

在实际开发中，不知您遇到过这样的问题吗？明明写的是1px，但是在手机上看起来却是2px,为此深受困扰吧。下面就是我在工作中使用的解决方法哦，希望对大家有所帮助。

移动端上边框和下边框的实现：

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

@media(-webkit-min-device-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5)
  .border-t-1px
    &::before
      -webkit-transform: scaleY(0.7)
      transform:scaleY(0.7)
@media(-webkit-min-device-device-pixel-ratio: 2),(min-device-device-pixel-ratio: 2)
  .border-t-1px
    &::before
      -webkit-transform: scaleY(0.5)
      transform:scaleY(0.5)
@media(-webkit-min-device-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5)
  .border-t-1px
    &::before
      -webkit-transform: scaleY(0.33333334)
      transform:scaleY(0.33333334)
@media(-webkit-min-device-device-pixel-ratio: 1.5),(min-device-device-pixel-ratio: 1.5)
  .border-b-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform:scaleY(0.7)
@media(-webkit-min-device-device-pixel-ratio: 2),(min-device-device-pixel-ratio: 2)
  .border-b-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform:scaleY(0.5)
@media(-webkit-min-device-device-pixel-ratio: 2.5),(min-device-device-pixel-ratio: 2.5)
  .border-b-1px
    &::after
      -webkit-transform: scaleY(0.33333334)
      transform:scaleY(0.33333334)

使用了stylus语法