移动端1像素（1px）边框（border）实现

<div class="tab">1像素边框实现</div>

1、1像素边框样式可以在多个地方使用，可以用方法的形式实现，.tab样式如下：

<style lang="stylus" rel="stylesheet/stylus">
  @import "./common/stylus/mixin.styl"
  .tab
    display: flex
    width: 100%
    height: 40px
    line-height: 40px
    border-1px(rgba(7, 17, 27, 0.1))
</style>

2、border-1px(rgba(7, 17, 27, 0.1))就是mixin.styl设置的方法，用伪类绝对定位1px：

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

3、对1像素设置一个全局的.border-1px样式，缩放适应不同手机的DPR，写在base.styl中

<div class="tab border-1px"></div>

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

4、在main.js中全局引用

import 'common/stylus/base.styl';

在手机上查看即可实现1像素边框效果。