隨著 Retina 螢幕的逐漸普及，網頁中對圖片的適配要求也越來越高。如何讓圖片在放大了兩倍的 Retina 螢幕顯示依然清晰，曾經一度困擾著網頁開發者，好在 CSS3 與 HTML5 已經著力在改變這種現狀。那麼到底什麼是響應式圖片呢？
什麼是響應式圖片？
響應式圖片是指：使用者代理根據輸出裝置的解析度不同載入不同型別的圖片，不會造成頻寬的浪費。同時，在改變輸出裝置型別或解析度時，能及時載入對應型別的圖片。
CSS3 處理響應式圖片
對於很多 IOS 開發者來說可能已經不太陌生了，為了適配 Retina 螢幕，傳統的 CSS3 實現方式是通過載入一張寬高分別放大兩倍的圖片，然後通過 Media Queries 使背景圖片尺寸減小一倍「background-size:50% 50%;」，例如：
.mod .hd h3 {
background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通螢幕 */
}
/* ------------- Retina ------------- */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2), /* Webkit */
only screen and (min-resolution: 240dpi), /* 標準 */
only screen and (min-resolution: 2dppx) /* 標準 */
{
.mod .hd h3{
background-image:url(;
background-size: 105px 155px;
}
}
CSS3 Media Queries 中用來定義裝置解析度的是 「resolution」 媒體特性，同時派生出兩個媒體特性，分別是 「min-resolution」和 「max-resolution」。該規範中規定：若查詢 Non-Square Pixels （專業術語，指高度與寬度不等的畫素，可以理解為「非正方形畫素」。計算機螢幕上及高清晰度視訊訊號中的畫素是正方形的（畫素寬高比為 1:1）。標準清晰度數碼視訊訊號中的畫素都不是正方形的。例如：NTSC制式的畫素高度大於寬度，而PAL制式的畫素寬度則大於高度。）裝置，在「min-resolution」查詢中指定的值必須與最稀疏尺寸進行比較，在「max-resolution」查詢中必須與最密集尺寸進行比較。對於「resolution」（沒有「min-」或「max-」字首）從不查詢 Non-Square Pixels 裝置。另外在 CSS image Level 3「image-resolution」屬性中定義了一些單位，比如「dppx」。
Chrome 支援私有屬性「-webkit-min-device-pixel-ratio」和「-webkit-max-device-pixel-ratio」。
Firefox 8.0 之前錯誤的接受了整數數值（不帶單位），16 開始支援 dppx 單位。
Change our implementation of the resolution media query to use CSS units。
David Barr 在 Webkit 實現了 CSS3「image-resolution」屬性， 並且支援了 dppx，dpi 和 dpcm 單位，具體 Chrome 哪個版本開始支援可以自行測試，相信 Media Queries 中很快也會支援了。
需要注意幾點：
「-o-min-device-pixel-ratio」的取值是分數比如「2 /3」，Demo，詳見：Opera Dev 的文章
Firefox 16 之前版本是「min–moz-device-pixel-ratio」，min 後面有兩個「-」。
1dppx 相當於 96dpi。
顯而易見，通過 Media Queries 來實現「響應式圖片」還是很麻煩，CSS 程式碼的可維護性不高，有一些 hack 的味道。我們更期望一種原生的語法來選擇不同的圖片，值得慶幸的是 CSS Image Level 4 中就實現了這種原生語法的「image-set」。
「image-set」語法：
那麼上面的例子我們可以改為：
background-image:url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png);/* 普通螢幕 */
background-image: -webkit-image-set(
url(http://img02.taobaocdn.com/tps/i2/T10s3JXn4XXXXnbIAn-105-160.png) 1x,
url( 2x);/* Retina */
這裡的單位「x」等同於「dppx」，將來是否統一還有待進一步討論。注意 Webkit 目前只實現了 url() 形式的取值，color、*-gradient() 等暫不支援，而且「x」取負值似乎也是合法的。
以下是一些常見移動裝置的「min-device-pixel-ratio」值：
-webkit-min-device-pixel-ratio: 1.0
所有非 Retina 的 Mac
所有非 Retina 的 iOS 裝置
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S
其他裝置
-webkit-min-device-pixel-ratio: 1.3
Google Nexus 7
-webkit-min-device-pixel-ratio: 1.5
Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Incredible S
HTC Velocity
HTC Sensation
-webkit-min-device-pixel-ratio: 2.0
iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有 Retina displays 的 Mac
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X
-webkit-min-device-pixel-ratio: 3.0
HTC Butterfly
Sony Xperia S