(八)：CSS圖片

譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-8-css-images.html
英文原文：http://blog.cloudfour.com/responsive-images-101-part-8-css-images/

大多數(shù)時候談到響應(yīng)式圖片，人們指的是內(nèi)聯(lián)圖片，而不是CSS圖片。

這是因為在<picture>和srcset之前內(nèi)聯(lián)響應(yīng)式圖片還沒有好的解決方案。但遇到CSS圖片時，我們可以使用媒體查詢，那還有什么可擔(dān)心呢？

現(xiàn)在是時候回顧響應(yīng)式CSS圖片并基于我們已經(jīng)學(xué)過的內(nèi)聯(lián)圖片尋找解決方案。

分辨率切換的解決方案image-set()

與我們正在研究的內(nèi)聯(lián)圖片一樣，首先需要考慮的問題是當(dāng)前的情況是分辨率切換還是藝術(shù)指導(dǎo)。

對于分辨率切換來說，我們需要盡可能給瀏覽器提供選擇并讓瀏覽器選擇可能最佳的圖片。瀏覽器基于用戶配置，網(wǎng)站環(huán)境等因素能夠知道哪張圖片可能最適合。

要給瀏覽器提供選項，我們應(yīng)該使用image-set()語法。

你也許會注意到image-set()和srcset之間的一些聯(lián)系。事實上，srcset是仿照image-set()的。

background-image: image-set( "foo.png" 1x, "foo-2x.png" 2x);

與srcset類似，image-set的值包含逗號分隔的圖片URL列表以及屏幕分辨率描述符。如果沒有提供屏幕分辨率描述符，默認(rèn)為1倍。

然而image-set()仍不支持寬度描述符。計劃是改善image-set()來提供與srcset等價的特性。

雖然你看到大部分image-set()例子都是用在background-image上，它其實可以用在任何可以使用圖片的CSS屬性上。

image-set()：被遺忘的響應(yīng)式圖片標(biāo)準(zhǔn)

image-set()是第一代響應(yīng)式圖片規(guī)范語法，正如本文所提到的那樣，它是srcset的基礎(chǔ)。

然而，因為普遍使用媒體查詢解決CSS響應(yīng)式圖片問題，image-set()幾乎被所有人忽視了。響應(yīng)式圖片研究小組沒有花很多時間來討論它。瀏覽器沒有優(yōu)先支持它。

當(dāng)<picture>和srcset的標(biāo)準(zhǔn)幾乎完成后，我們環(huán)顧四周意識到需要重新協(xié)商image-set()，于是我們已經(jīng)開始增強(qiáng)image-set()的功能并把它嵌入srcset。

眾所周知，雖然image-set()是第一個響應(yīng)式圖片標(biāo)準(zhǔn)，但是它依然缺乏瀏覽器支持。在Chrome，Opera和Safari中添加webkit前綴可用。Firefox和Microsoft都還沒有支持。

那么為什么我們要在響應(yīng)式圖片101系列里提到呢？

因為image-set()是分辨率切換的正確解決方案。當(dāng)image-set()被廣泛支持時，面對分辨率切換的情況我們應(yīng)當(dāng)使用它而不是帶媒體屬性的<picture>元素，原因與使用帶媒體屬性的<picture>相同。

直到image-set()被廣泛支持前，你還是會使用CSS藝術(shù)指導(dǎo)方案來解決分辨率切換。

藝術(shù)指導(dǎo)

藝術(shù)指導(dǎo)的CSS解決方案是什么呢？媒體查詢。

這很簡單，事實上我假定你已經(jīng)對媒體查詢有所了解因此沒有提供語法樣例。

但是請聽我說，請確保圖片的媒體查詢沒有重疊否則會導(dǎo)致重復(fù)下載圖片。如果有任何疑問，查看Tim Kadlec的媒體查詢和資源下載結(jié)果。

分辨率媒體查詢

如果你想在高分辨率屏幕下支持藝術(shù)指導(dǎo)，那肯定想用分辨率媒體查詢。

分辨率媒體查詢讓你可以針對滿足定義分辨率的設(shè)備屏幕添加特定CSS規(guī)則。

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)    {/* High density stuff here */??????}

（非常感謝CSS Tricks提供語法樣例。）

上述語法中你首先會注意到的是我們加入了包含-webkit前綴的媒體查詢。這是為了支持老device-pixel-ratio語法的機(jī)器。只有一臺機(jī)器支持這個帶-webkit前綴的語法所以只列出了一臺。

更近一步的語法是分辨率媒體查詢。在我們的例子中，我們用了最小分辨率，但是正如你猜到的那樣，當(dāng)然有最大分辨率這個功能可以使用。

分辨率媒體查詢可以檢查以下三種情況：

• dip:點每英尺
• dpcm:點每厘米
• dppx:點每像素

前兩個單位很直觀，對于dppx我有寫疑惑。Mozilla網(wǎng)絡(luò)開發(fā)文檔這樣定義dppx：

這個單位代表每像素單位上點的數(shù)目。因為CSS中in與px的比例固定為1:96，1dppx等于96dpi，這與CSS中由圖片分辨率定義的默認(rèn)圖片分辨率顯示有關(guān)。

有一點疑惑？剛開始看到我也是這樣。

我是這樣想的，1x,2x,3x等都基于不明確的定義。一些設(shè)備上1倍的值與其它設(shè)備不同因為一些設(shè)備的分辨率是72dpi或96dpi以及其它。

然而從CSS的角度看，這些差異無關(guān)緊要。CSS工作組決定了CSS中in與px的比例固定為1:96。

因此，雖然72dpi和96dpi的博弈導(dǎo)致1倍的定義不明確，1ppx是大家都認(rèn)同的“1倍”。

你也許會問，1倍為什么對于srcset和image-set那么重要，對于最小分辨率來說，還有必要使用dppx嗎？

我不知道。我只知道你可以把1dppx當(dāng)做1倍，2dppx當(dāng)做2倍，以此類推。在這一點上，我剛剛才接受了這個差異并決定繼續(xù)向前看。我推薦你也這么做。;-)

來到最難的部分

信不信由你，響應(yīng)式圖片的語法其實是簡單的部分。在下一節(jié)里，我們將討論選擇圖片斷點的巨大挑戰(zhàn)。