移动端关于@2x与@3x的图片加载实现方法（基于vue.js+stylus）

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语法