隨著 Retina 屏幕的逐漸普及，網(wǎng)頁中對圖片的適配要求也越來越高。如何讓圖片在放大了兩倍的 Retina 屏幕顯示依然清晰，曾經(jīng)一度困擾著網(wǎng)頁開發(fā)者，好在 CSS3 與 HTML5 已經(jīng)著力在改變這種現(xiàn)狀。那么到底什么是響應式圖片呢？
什么是響應式圖片？
響應式圖片是指：用戶代理根據(jù)輸出設備的分辨率不同加載不同類型的圖片，不會造成帶寬的浪費。同時，在改變輸出設備類型或分辨率時，能及時加載對應類型的圖片。
CSS3 響應式圖片
對于很多 IOS 開發(fā)者來說可能已經(jīng)不太陌生了，為了適配 Retina 屏幕，傳統(tǒng)的 CSS3 實現(xiàn)方式是通過加載一張寬高分別放大兩倍的圖片，然后通過 Media Queries 使背景圖片尺寸減小一倍「background-size:50% 50%;」，例如：
.mod .hd h3 {
background-image:url(http://alibuybuy-img11.stor.sinaapp.com/2013/01/ac30_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(http://alibuybuy-img11.stor.sinaapp.com/2013/01/a8e5_T1947tXmJhXXcCfooh-210-320.png);
background-size: 105px 155px;
}
}兩張圖片的對比效果：
在制作@2x圖片時需要注意一些問題：
如果類似上圖一樣是純文字內(nèi)容的圖片，不要直接從大圖片縮放為小圖片，這樣文字效果會有些失真，這是 Photoshop 渲染的問題。應該調(diào)整字號，再重新排版。可以直接看看：一淘首頁 的效果。
CSS3 Media Queries 中用來定義設備分辨率的是 「resolution」 媒體特性，同時派生出兩個媒體特性，分別是 「min-resolution」和 「max-resolution」。該規(guī)范中規(guī)定：若查詢 Non-Square Pixels （專業(yè)術語，指高度與寬度不等的像素，可以理解為「非正方形像素」。計算機屏幕上及高清晰度視頻信號中的像素是正方形的（像素寬高比為 1:1）。標準清晰度數(shù)碼視頻信號中的像素都不是正方形的。例如：NTSC制式的像素高度大于寬度，而PAL制式的像素寬度則大于高度。）設備，在「min-resolution」查詢中指定的值必須與最稀疏尺寸進行比較，在「max-resolution」查詢中必須與最密集尺寸進行比較。對于「resolution」（沒有「min-」或「max-」前綴）從不查詢 Non-Square Pixels 設備。另外在 CSS image Level 3「image-resolution」屬性中定義了一些單位，比如「dppx」，各瀏覽器支持情況如下：
| 特性 | Chrome | Firefox (Gecko) | IE | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| 基本特性 | 不支持「1」「4」 | 3.5 (1.9.1) 「2」 | 9 | 9.5 | 不支持 「1」「4」 |
dppx | 「4」 | 16.0 | 未知 | 12.10「3」 | 「4」 |
- 「1」Chrome 支持私有屬性「-webkit-min-device-pixel-ratio」和「-webkit-max-device-pixel-ratio」。
- 「2」Firefox 8.0 之前錯誤的接受了整數(shù)數(shù)值（不帶單位），16 開始支持 dppx 單位。
- 「3」Change our implementation of the resolution media query to use CSS units。
- 「4」David Barr 在 Webkit 實現(xiàn)了 CSS3「image-resolution」屬性， 并且支持了 dppx，dpi 和 dpcm 單位，具體 Chrome 哪個版本開始支持可以自行測試，相信 Media Queries 中很快也會支持了。
需要注意幾點：
- 「-o-min-device-pixel-ratio」的取值是分數(shù)比如「2 /3」，Demo，詳見：Opera Dev 的文章
- Firefox 16 之前版本是「min–moz-device-pixel-ratio」，min 后面有兩個「-」。
- 1dppx 相當于 96dpi。
顯而易見，通過 Media Queries 來實現(xiàn)「響應式圖片」還是很麻煩，CSS 代碼的可維護性不高，有一些 hack 的味道。我們更期望一種原生的語法來選擇不同的圖片，值得慶幸的是 CSS Image Level 4 中就實現(xiàn)了這種原生語法的「image-set」。
「image-set」語法：
= image-set( [ , ]* [ | ] ) = [ |
]
那么上面的例子我們可以改為：
background-image:url(http://alibuybuy-img11.stor.sinaapp.com/2013/01/ac30_T10s3JXn4XXXXnbIAn-105-160.png);/* 普通屏幕 */
background-image: -webkit-image-set(
url(http://alibuybuy-img11.stor.sinaapp.com/2013/01/ac30_T10s3JXn4XXXXnbIAn-105-160.png) 1x,
url(http://alibuybuy-img11.stor.sinaapp.com/2013/01/a8e5_T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */這里的單位「x」等同于「dppx」，將來是否統(tǒng)一還有待進一步討論。注意 Webkit 目前只實現(xiàn)了 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