手機端解決2倍圖3倍圖自適應

1.第一種方法 通過 css 的 DevicePixelRatio 媒體查詢屬性:

/*默認大小*/
.photo {background-image: url(image100.png);}
/* 如果設備像素大於等於2，則用2倍圖 */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min--moz-device-pixel-ratio: 2) {
  .photo {
    background-image: url(image200.png);
    background-size: 100px 100px;
  }
}
/* 如果設備像素大於等於3，則用3倍圖 */
@media screen and (-webkit-min-device-pixel-ratio: 3),
screen and (min--moz-device-pixel-ratio: 3) {
  .photo {
    background-image: url(image300.png);
    background-size: 100px 100px;
  }
}
.photo {width:100px;height:100px;}

2.第二種方法通過 scss 的mixin動態修改背景圖片,判斷設備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");
    }
}
.div{
  width:30px;
  height:20px;
  background-size:30px  20px;
  background-repeat:no-repeat;
  //在這裏相當於調用了上面媒體查詢的方法 ,傳入圖片url
  @include bg-image('special_1');     
}

3.第三種方法也是推薦的方法,通過img標籤屬性動態切換url:

< img width="100" height="100" src="image100.png" srcset="image200.png 2x,image300.png 3x"/>

瀏覽器會通過 srcset 屬性來自動選擇2X,3X圖，比如用 iPhone 6s Plus，就會自動選擇3x 的圖像。