功能描述:当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