移动端一像素边框解决方案

整体思路: 伪类+缩放

1. 添加一个伪类作为下边框

// mixin.less文件,使用的less语法
.border-1px(@color) {
  position: relative;
  &:after {
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    border-top: 1px solid @color;
    content: '';
  }
}

2.设置不同dpr下的缩放

// base.less文件
@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);
    }
  }
}

3. 将两个文件统一新建一个文件引入(后续只引入这一个文件即可)

@import "./mixin.less";
@import "./base.less";

4.在vue文件中引入并使用(或在main.js文件中引入)

// 在vue文件中的style样式中用@import引入
@import '../styles/index.less';

// 在样式中可以使用.border-1px函数
 .border-1px(rgba(7,17,27,0.1));
 
 // 添加类名,在不同dpr中缩放使用
  <div class="tab border-1px">