移動端根據不一樣DPR加載大小不一樣的圖片

1.首先建立mixin.styl文件代碼以下：

bg-image($url)  // 建立bg-image($url)函數
   background-image: url($url + "@2x.png")
   @media(-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
     background-image: url($url + "@3x.png")


2.編寫html代碼

<div class="title">
  <span class="brand"></span>
  <span class="name"></span>
</div>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"   //引用mixin.styl文件

  .brand

  display: inline-block
  width: 30px
  height: 18px
  bg-image('brand')  // 使用bg-image($url)函數 $url爲變量：brand
  background-size: 30px 18px
  background-repeat: no-repeat

</style>

註釋

  bg-image('brand')中 brand爲/header/brang.@2x.png || brang.@3x.png的圖片名

/header/brang.@2x.png || brang.@3x.png爲文件路徑


此處使用stylus語法

 轉自https://blog.csdn.net/qq_38229202/article/details/69676697