移动端1px边框的实现

移动端存在设备像素比devicePixelRatio（简称DPR），所以在电脑端设置：

    border-bottom: 1px solid red

在PC端是1px，但是在手机端的显示就是2px或则更多。
大多数的手机min-device-aspect-ratio值是1.5或则是2.0.所以代码如下：

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

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

注：样式是采用stylus语法来编写的。