1像素border实现

.tab{
border-bottom: 1px solid rgba(7,17,27,0.1);
}

PC端是真的1像素
手机端dpi物理像素是设备像素的两倍，在手机上则是2像素

• 在手机上实时预览
  ipconfig
  IP访问
  cli.im 复制http://192.168.1.12:8080/goods 生成二维码
  如果不行，配置webpack.dev.conf.js:
  host: '0.0.0.0',// 127.0.0.1 只能本地访问，换成0.0.0.0即可

  proxy: {
      '/api/': {
        target: 'http://127.0.0.1:8080',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

通过对.tab添加一个伪类after，设置一条线，在dpi为2或者3的手机下对宽度进行缩放，这样就可以实现1像素的效果。

+common
  +stylus
    mixin.styl:
      border-1px($color)//border-1px是一个函数
      position: relative
      &:after
        display: block
        position:absolute
        left:0
        bottom 0
        width:100%
        border-top: 1px solid $color
        content: ' '

在app.vue:中引用mixin.styl
@import "./common/stylus/mixin.styl"
.app 
    .tab
      border-1px(rgba(7,17,27,0.1))

mixin.styl作为一个公共的css

给border-1px做缩放实现真正的1px

• mixin.styl:

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