> 譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-8-css-images.html > 英文原文：http://blog.cloudfour.com/responsive-images-101-part-8-css-images/ 大多數時候談到響應式圖片，人們指的是內聯圖片，而不是CSS圖片。 這是因為在`<picture>`和`srcset`之前內聯響應式圖片還沒有好的解決方案。但遇到CSS圖片時，我們可以使用媒體查詢，那還有什么可擔心呢？ 現在是時候回顧響應式CSS圖片并基于我們已經學過的內聯圖片尋找解決方案。 ## 分辨率切換的解決方案`image-set()` 與我們正在研究的內聯圖片一樣，首先需要考慮的問題是當前的情況是[分辨率切換](http://www.w3cplus.com/responsive/responsive-images-101-definitions.html)還是[藝術指導](http://www.w3cplus.com/responsive/responsive-images-101-definitions.html)。 對于分辨率切換來說，我們需要盡可能給瀏覽器提供選擇并讓瀏覽器選擇可能最佳的圖片。瀏覽器基于用戶配置，網站環境等因素能夠知道哪張圖片可能最適合。 要給瀏覽器提供選項，我們應該使用[`image-set()`語法](http://www.w3cplus.com/css/safari-6-and-chrome-21-add-image-set-to-support-retina-images.html)。  你也許會注意到`image-set()`和`srcset`之間的一些聯系。事實上，`srcset`是仿照`image-set()`的。 ~~~ background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x); ~~~ 與`srcset`類似，`image-set`的值包含逗號分隔的圖片`URL`列表以及屏幕分辨率描述符。如果沒有提供屏幕分辨率描述符，默認為`1`倍。 然而`image-set()`仍不支持寬度描述符。計劃是改善`image-set()`來提供與`srcset`等價的特性。 雖然你看到大部分`image-set()`例子都是用在`background-image`上，它其實可以用在任何可以使用圖片的CSS屬性上。 ## image-set()：被遺忘的響應式圖片標準 `image-set()`是第一代響應式圖片規范語法，正如本文所提到的那樣，它是`srcset`的基礎。 然而，因為普遍使用媒體查詢解決CSS響應式圖片問題，`image-set()`幾乎被所有人忽視了。響應式圖片研究小組沒有花很多時間來討論它。瀏覽器沒有優先支持它。 當`<picture>`和`srcset`的標準幾乎完成后，我們環顧四周意識到需要重新協商`image-set()`，于是我們已經開始增強`image-set()`的功能并把它嵌入`srcset`。 眾所周知，雖然`image-set()`是第一個響應式圖片標準，但是它依然缺乏瀏覽器支持。在Chrome，Opera和Safari中[添加webkit前綴可用](http://caniuse.com/#search=image-set)。Firefox和Microsoft都還沒有支持。 那么為什么我們要在[響應式圖片101系列](http://www.w3cplus.com/blog/tags/509.html)里提到呢？ 因為`image-set()`是分辨率切換的正確解決方案。當`image-set()`被廣泛支持時，面對分辨率切換的情況我們應當使用它[而不是帶媒體屬性的`<picture>`元素](http://blog.cloudfour.com/dont-use-picture-most-of-the-time/)，原因與使用帶媒體屬性的`<picture>`相同。 直到`image-set()`被廣泛支持前，你還是會使用CSS藝術指導方案來解決分辨率切換。 ## 藝術指導 藝術指導的CSS解決方案是什么呢？媒體查詢。 這很簡單，事實上我假定你已經對媒體查詢有所了解因此沒有提供語法樣例。 但是請聽我說，請確保圖片的媒體查詢沒有重疊否則會導致重復下載圖片。如果有任何疑問，查看Tim Kadlec的[媒體查詢和資源下載結果](http://timkadlec.com/2012/04/media-query-asset-downloading-results/)。 ## 分辨率媒體查詢 如果你想在高分辨率屏幕下支持藝術指導，那肯定想用分辨率媒體查詢。  分辨率媒體查詢讓你可以針對滿足定義分辨率的設備屏幕添加特定CSS規則。 ~~~ @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {/* High density stuff here */??????} ~~~ （非常感謝CSS Tricks提供[語法樣例](https://css-tricks.com/snippets/css/retina-display-media-query/)。） 上述語法中你首先會注意到的是我們加入了包含`-webkit`前綴的媒體查詢。這是為了支持老`device-pixel-ratio`語法的機器。只有一臺機器支持這個帶`-webkit`前綴的語法所以只列出了一臺。 更近一步的語法是分辨率媒體查詢。在我們的例子中，我們用了最小分辨率，但是正如你猜到的那樣，當然有最大分辨率這個功能可以使用。 分辨率媒體查詢可以檢查以下三種情況： * **`dip`**:點每英尺 * **`dpcm`**:點每厘米 * **`dppx`**:點每像素 前兩個單位很直觀，對于`dppx`我有寫疑惑。Mozilla網絡開發文檔這樣[定義`dppx`](https://developer.mozilla.org/en-US/docs/Web/CSS/resolution)： > 這個單位代表每像素單位上點的數目。因為CSS中`in`與`px`的比例固定為`1:96`，`1dppx`等于`96dpi`，這與CSS中由圖片分辨率定義的默認圖片分辨率顯示有關。 有一點疑惑？剛開始看到我也是這樣。 我是這樣想的，`1x`,`2x`,`3x`等都基于不明確的定義。一些設備上`1`倍的值與其它設備不同因為一些設備的分辨率是`72dpi`或`96dpi`以及其它。 然而從CSS的角度看，這些差異無關緊要。CSS工作組決定了CSS中`in`與`px`的比例固定為`1:96`。 因此，雖然`72dpi`和`96dpi`的博弈導致`1`倍的定義不明確，`1ppx`是大家都認同的“`1`倍”。 你也許會問，`1`倍為什么對于`srcset`和`image-set`那么重要，對于最小分辨率來說，還有必要使用`dppx`嗎？ 我不知道。我只知道你可以把`1dppx`當做`1`倍，`2dppx`當做`2`倍，以此類推。在這一點上，我剛剛才接受了這個差異并決定繼續向前看。我推薦你也這么做。;-) ## 來到最難的部分 信不信由你，響應式圖片的語法其實是簡單的部分。在下一節里，我們將討論選擇圖片斷點的巨大挑戰。