vue 移动端关于@2x @3x 图片引用加载（基于vue.js+stylus）

https://blog.csdn.net/qq_38229202/article/details/69676697

https://www.zhihu.com/question/26195746/answer/32341360

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/[email protected] || [email protected]的图片名

/header/[email protected] || [email protected]为文件路径

此处使用stylus语法

苹果IOS程序开发不同分辨率的设备统一为一个尺寸而标记的。@3X就是@1X分辨率的3倍。

如图，iPad2 是768 x 1024，iPad Retina 是1536 x 2048，开发时都按 768 * 1024 操作。但实际上两者有一倍差异。为了达到最佳效果，使用的图片大小不一样。 这时候就用同一个名称，但 Retina 的图加上 @2x 后缀。系统加载图片时，在 iPad2 上会加载 @1x 的图在 1536 * 2048 的设备上，会加载 @2x 的。@3x 现在用于 iPhone 6/6+ 上 。

附带一提：iOS8渲染操作中使用前缀带有@1x、@2x 和@3x 的测试图像，代码会优先载入3x 图像。@2x图像不被加载。使用图像文件和XCAsset均不行。

参考资料
[1]图片出处 http://blog.csdn.net/cuibo1123/article/details/39405973