移动端根据不同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