vue中@2x和@3x图片的使用

在前端开发中因为屏幕像素比的关系，经常要根据各种型号手机的dpi来加载不同分辨率的图片，来提高性能以及更好的展示

在vue开发中秉承组件化的开发原则，所有和该组件相关的图片应该和该组件在一个文件夹下，所以把这个组件全部相关的图片放入组件目录下，并按相同的规律命名文件

接下来定义一个mixin.scss（通过@media (媒体查询)，判断设备的dpr）

@mixin 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");
    }
}

在组件的样式中引入这个混合变量，调用方式很简单：

<style lang="scss">
  @import './common/css/mixin.scss';
  .brand{
    width:30px;
    height:30px;
    background-size:30px  30px;
    background-repeat:no-repeat;
    @include bg-image('brand'); 
  }
</style>