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:;
    bottom:;
    width: 100%;
    border-top: 1px solid $color;
    content: ' ';
  }
}

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

在vue中使用

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

    //brand@2x.png 和brand@3x.png文件
    @include bg-image('brand');
</style>