移动端1px 边框完整方案（四个方向）

使用stylus(预处理)

需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色

$border1px(face,$color)

根据传入的方向属性，调整其他参数

l  左右方向

t  垂直方向

w 上下出现边框则为width反之为height（边框在方向上的长度）

b 上出现边框则为bottom

x 为哪个方向上的缩放

具体对应关系如下

  face==top    && (l=left  t=top b=bottom w=width  x=scaleY)
  face==bottom && (l=left  b=top t=bottom w=width  x=scaleY)
  face==left   && (l=left  t=top b=right  w=height x=scaleX)
  face==right  && (l=right t=top b=left   w=height x=scaleX)

下面是边框

  .border-1px {
    position relative
  }
  .border-1px::after {
    display block
    position absolute
    {l}
    {t}
    {w} %
    border-{b} 1px solid $color
    content ' '
  }

媒体查询

这里需要使用字符串拼接 写成x(0.7)  x将不会赋值

  @media (-webkit-min-device-pixel-ratio 1.5),(min-device-pixel-ratio1.) {
    .border-1px::after {
      -webkit-transform x+'(0.7)'
      transform x+'(0.7)'
    }
  }
  @media (-webkit-min-device-pixel-ratio ),(min-device-pixel-ratio ) {
    .border-1px::after {
      -webkit-transform x+'(0.5)'
      transform x+'(0.5)'
    }
  }

html

  <div class="product">
    <div class="border-1px">
      <p></p>
      <p></p>
      <p></p>
      <p></p>
    </div>
  </div>

css

<style scoped lang="stylus">
@import '../common/css/index'
.product
  $border1px(top,red)
  border-bottom 1px solid red
</style>

效果图

完整代码

 $border1px(face,$color)
   face==top    && (l=left  t=top b=bottom w=width  x=scaleY)
   face==bottom && (l=left  b=top t=bottom w=width  x=scaleY)
   face==left   && (l=left  t=top b=right  w=height x=scaleX)
   face==right  && (l=right t=top b=left   w=height x=scaleX)
   .border-1px {
     position relative
   }
   .border-1px::after {
     display block
     position absolute
     {l} 0
     {t} 0
     {w} 100%
     border-{b} 1px solid $color
     content ' '
   }
   @media (-webkit-min-device-pixel-ratio 1.5),(min-device-pixel-ratio1.5) {
     .border-1px::after {
       -webkit-transform x(0.7)
       transform x+'(0.7)'
     }
   }
   @media (-webkit-min-device-pixel-ratio 2),(min-device-pixel-ratio 2) {
     .border-1px::after {
       -webkit-transform x+'(0.5)'
       transform x+'(0.5)'
     }
   }