移动端项目中 @2x 图 和 @3x 图 的解决方案

1. 很多人会问？为什么移动端需要@2x或者@3x的图片 ?

具体请参考：为什么移动端需要@2x或者@3x的图片
本篇主要是解决@2x 图 和 @3x 图 的实现方案，下面是具体板栗。

说在前面的话：
移动端开发过程中，你会发现公司项目图片文件夹中会有很多@2x或者@3x的图标，是因为手机的dpr(设备像素比不同)，我们> 需要根据dpr来修改不同大小的图标，来解决不同设备用户视觉体验。
注：下面是scss语法。

2.通过mixin,动态修改图标的背景图片。通过@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");
    }
}

3.css样式中调用 bg-image 方法

div{
  width:30px;
  height:30px;
  background-size:30px  30px;
  background-repeat:no-repeat;
  @include bg-image('logo');      
}