移動端開發(fā)過程中，因為手機的dpr(設(shè)備像素比不同)，需要根據(jù)dpr來修改圖標(biāo)的大小，判斷使用@2x 圖 還是 @3x 圖，解決高清的適配。

1.css3的 -webkit-min-device-pixel-ratio屬性，@media媒體查詢（只能用于背景圖片）

/*less，sass這類css預(yù)處理語言中的混合，可以理解成自定義了一段代碼，后面可以用@include調(diào)用*/
@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調(diào)用*/
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”進(jìn)行判斷，然后根據(jù)對應(yīng)的值給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);
    });
  }
});

相關(guān)知識點

理解css中@mixin：
less，sass這類css預(yù)處理語言中的混合，可以理解成自定義了一段代碼，后面可以用@include調(diào)用，如設(shè)置一個有默認(rèn)寬高的mixin（不帶參數(shù)的類似）

//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;
}