移动端关于图片适配2X和3X图

 

1.准备2x,3X图片，在vue项目中的assets中新建stylus文件夹，新建mixin.stylus

适配图片

//关于2X,3x图的兼容
bg-image($url)
  //正常情形
  background-image: url($url + "@2x.png")
  // 3X图时
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
    background-image: url($url + "@3x.png") 

然后在vue项目中的样式中导入该文件，并写入对应的样式中，url路径要正确

 

 

 

 

 

@import '../../assets/stylus/mixin.stylus'

       .brand
          display :inline-block
          width :30px
          height :18px
          bg-image('images/brand')
          background-size : 30px 18px
          backrground-repeat :no-repeat