stylus实现移动设备1px边框

移动端1px的设置：

一般情况下设置border-bottom:1px solid #ccc中，在pc端显示的值为正常的1px，但是在移动设备上渲染为2px，与设计稿不符，另外border-bottom:0.5px solid #ccc在Android上是不能识别的。

解决方法：使用伪类+transform

1.创建mixin.styl文件

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

2.设备设置

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
    .border-1px-bottom
        $::after
            -webkit-transform: scaleY(0.7)
            transform: scale(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
    .border-1px-bottom
        $::after
            -webkit-transform: scaleY(0.5)
            transform: scale(0.5)
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
    .border-1px-top
        $::after
            -webkit-transform: scaleY(0.7)
            transform: scale(0.7)
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
    .border-1px-top
        $::after
            -webkit-transform: scaleY(0.5)
            transform: scale(0.5)

3.css中使用

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"
  #box
    .tab
      display: flex
      width: 100%
      height: 40px
      line-height: 40px
      border-bottom-1px (rgba(7,17,27,0.1))
      border-top-1px(rgba(7,17,27,0.1))
      .tab-item
        flex:1
        text-align:center
        & > a
          display: block
          fon-size: 14px
          color: rgb(77,85,93)
          &.active
            color: red
</style>