CSS 或 srcset 讓瀏覽器自動切換 1X/2X/3X 圖像

Sponsor

現在很多客戶都買高分屏的電腦，如果直接發 JPG 圖給客戶，會影響設計質量。為了讓網站設計效果圖更加真實，最近把設計提案直接做成 Web 版，模擬瀏覽器真實視覺效果，同時能自動識別是否為視網膜顯示屏，并自動切換為 2X 或 3X 圖像。

這里介紹2個簡單的方法來實現這個效果，分別是使用 CSS 的媒體查詢或 srcset 屬性來處理這個問題。

開始之前，我們要準備3張圖：

images100.jpg (為1X大小圖像,100px * 100px)
images200.jpg (為2X大小圖像, 200px * 200px)
images300.jpg (為3X大小圖像, 300px * 300px)

CSS教程：自動切換 1X/2X/3X 圖像
在線演示：http://www.zhuozheima.cn/examples/css-device-pixel-ratio/

下面來看教程吧。

方法一：使用 CSS 的 devicePixelRatio 媒查詢屬性

CSS 樣式代碼

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

html 代碼

<div class="photo"></div>

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

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

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

想了解更多設備的devicePixelRatio，可查看到這個網址查看：

https://bjango.com/articles/min-device-pixel-ratio/

以上代碼都需要支持 CSS3 的瀏覽器才能兼容，過低版本將無法看到效果。

贊助商鏈接

喜歡這篇文章嗎？歡迎分享到你的微博、QQ群，并關注我們的微博，謝謝支持。
版權：除非注明，本站文章均為原創文章，轉載請聯系我們授權，否則禁止轉載。