vue 二三倍圖適配，1像素邊框

//文件名為mixin.scss
// 2,3倍圖適配
@mixin bg-image($url){
  background-image: url("~imgs/icon/" + $url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image: url("~imgs/icon/" + $url + "@3x.png");
  }
}

//一像素邊框
@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);
    }
  }
}

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

@mixin border-none(){
  &:after{
    display: none;
  }
}

 在vue中使用

<style lang="scss">
    //mixin.scss文件存放路徑
    @import '../assets/mixin.scss';
    

    //[e-mail] 和[e-mail]文件
    @include bg-image('brand');
</style>