css二倍圖的使用

使用 CSS 的 DevicePixelRatio 媒查詢屬性

參考 CSS 或 srcset 讓瀏覽器自動切換 1X/2X/3X圖像
移動端項目中 @2x 圖 和 @3x 圖 的使用（需要支持css3）

/*默認大小*/
.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;}

scss寫法

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

css樣式中調用 bg-image 方法

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

方法二:直接使用 IMG 的 SRCSET 屬性

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

如何在普清的屏上調試CSS樣式二倍圖背景