vue 二三倍图适配，1像素边框

• Z时代
• 2024-01-10
• 分类：综合

//文件名为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';
    //brand@2x.png 和brand@3x.png文件
    @include bg-image('brand');
</style>

以上是 vue 二三倍图适配，1像素边框 的全部内容， 来源链接： utcz.com/z/380337.html