移动端根据DPR设置展示的图片是2X还是3X

 

功能描述：当DPR=2，显示2X图片；当DPR=3，显示3X图片

 实现方式：

1、dom结构

 <div class="title">
          <span class="brand"></span>
          <span class="name">{{seller.name}}</span>
 </div>

2、.brand样式

@import "../../common/stylus/mixin";

.brand
            display: inline-block
            vertical-align: top
            width: 30px
            height: 18px
            bg-image('brand')
            background-size: 30px 18px
            background-repeat: no-repeat

3、 bg-image('brand')是定义在 mixin.styl中的方法，用来实现展示哪张图片，传递一个字符串参数：

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")

以上，即可实现根据DPR设置展示的图片是2X还是3X