移动端H5项目判断使用几倍图

移动端开发过程中，因为手机的dpr(设备像素比不同)，需要根据dpr来修改图标的大小，判断使用@2x 图 还是 @3x 图，解决高清的适配。

1.css3的 -webkit-min-device-pixel-ratio属性，@media媒体查询（只能用于背景图片）

/*less，sass这类css预处理语言中的混合，可以理解成自定义了一段代码，后面可以用@include调用*/
@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");    
      }
}
/*用@include调用*/
div{
  width:30px;
  height:20px;
  background-size:30px  20px;
  background-repeat:no-repeat;
  @include bg-image('../../../../static/image/map_loading');     
}

2.JavaScript的解决方案

使用js对“window.devicePixelRatio”进行判断，然后根据对应的值给Retina屏幕选择图像。

$(document).ready(function(){
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img');
    images.each(function(i) {
      var lowres = $(this).attr('src');
      var highres = lowres.replace(".", "@2x.");
      $(this).attr('src', highres);
    });
  }
});

相关知识点

理解css中@mixin：
less，sass这类css预处理语言中的混合，可以理解成自定义了一段代码，后面可以用@include调用，如设置一个有默认宽高的mixin（不带参数的类似）

//scss
@mixin box-size($width:100px,$height:100px) {
    width: $width;
    height: $height;
}
.demo{
    @include box-size;
}

.demo2{
    @include box-size(200px,300px);
}

编译之后就是

/*css*/
.demo{
    width: 100px;
    height: 100px;
}

.demo2{
    width: 200px;
    height: 300px;
}