關于響應式的，近來國内外也不斷提到，還是目前比較流行的技術話題，這篇文章來至淘寶ued的，講得是響應式圖檔，寫得很不錯。
随着 retina 螢幕的逐漸普及，網頁中對圖檔的适配要求也越來越高。如何讓圖檔在放大了兩倍的 retina 螢幕顯示依然清晰，曾經一度困擾着網頁開發者，好在 css3 與 html5 已經着力在改變這種現狀。那麼到底什麼是響應式圖檔呢？
響應式圖檔是指：使用者代理根據輸出裝置的分辨率不同加載不同類型的圖檔，不會造成帶寬的浪費。同時，在改變輸出裝置類型或分辨率時，能及時加載對應類型的圖檔。
兩張圖檔的對比效果：
在制作@2x圖檔時需要注意一些問題：
藍框内是直接縮放圖檔大小的效果，紅框内是把字号從32号改成16号的效果。
特性
chrome
firefox (gecko)
ie
opera
safari (webkit)
基本特性
不支援「1」「4」
3.5 (1.9.1) 「2」
9
9.5
不支援 「1」「4」
dppx
「4」
16.0
未知
「1」chrome 支援私有屬性「-webkit-min-device-pixel-ratio」和「-webkit-max-device-pixel-ratio」。
「2」firefox 8.0 之前錯誤的接受了整數數值（不帶機關），16 開始支援 dppx 機關。
需要注意幾點：
firefox 16 之前版本是「min–moz-device-pixel-ratio」，min 後面有兩個「-」。
1dppx 相當于 96dpi。
「image-set」文法：
那麼上面的例子我們可以改為：
<a href="http://bjango.com/articles/min-device-pixel-ratio/" target="_blank">以下是一些常見移動裝置的「min-device-pixel-ratio」值：</a>
-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
可以看到這裡的「srcset」屬性類似「image-set」，通常情況下，「srcset」裡面的資源是具有 fallback 特性的，也就是說第一個圖檔資源無法加載的時候可以跳過加載後面的備用資源。
本來想把新年的第一篇文章寫的歡樂一些，不過貌似沒啥槽點。html5 響應式圖檔的草案還剛剛開始，但是前景還是很美好的。目前我們能做的就是在css 中使用「image-set」屬性值，因為目前大部分 retina 螢幕的裝置的浏覽器都是基于 webkit 核心的，如果有特殊的需求可以使用 media queries。
非常感謝 kenny 對本文排版細節提出的 14 條建議，本文排版遵循：
使用繁體中文引号 「」代替簡體中文「“”」引号；
中英文混排時英文首尾各加一個空格。
作者：白樹
<a href="http://peunzhang.cnblogs.com/" target="_blank"></a>