使用stylus编写bg-image（）实现网页图标自适应dpr数值来识别2x图或者3x图

mixin.styl：

bg-image($url)//默认2x图，dpr为3则使用3x图
  background-image: url($url+"@2x.png")
  @media (-webkit-min-device-pixel-ratio: 3),(-min-device-pixel-ratio: 3)
    background-image: url($url+"@3x.png")

header.vue:

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


<style lang='stylus'>
@import '../../common/stylus/mixin.styl'//使用前需要导入

...
      .title
        margin: 2px 0 8px 0
        .brand
          display: inline-block
          vertical-align: top
          width: 30px
          height: 18px
          bg-image('brand')
          background-size: 30px 18px
          background-repeat: no-repeat
        .name
          margin-left: 6px
          font-size: 16px
          font-weight: bold
          line-height: 18px
</style>