移動端關於圖片適配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