Css3處理響應式圖片

隨着 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(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);
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」。

1. Chrome 支持私有屬性「-webkit-min-device-pixel-ratio」和「-webkit-max-device-pixel-ratio」。
2. Firefox 8.0 之前錯誤的接受了整數數值（不帶單位），16 開始支持 dppx 單位。
3. Change our implementation of the resolution media query to use CSS units。
4. David Barr 在 Webkit 實現了 CSS3「image-resolution」屬性， 並且支持了 dppx，dpi 和 dpcm 單位，具體 Chrome 哪個版本開始支持可以自行測試，相信 Media Queries 中很快也會支持了。

需要注意幾點：

1. 「-o-min-device-pixel-ratio」的取值是分數比如「2 /3」，Demo，詳見：Opera Dev 的文章
2. Firefox 16 之前版本是「min–moz-device-pixel-ratio」，min 後面有兩個「-」。
3. 1dppx 相當於 96dpi。

顯而易見，通過 Media Queries 來實現「響應式圖片」還是很麻煩，CSS 代碼的可維護性不高，有一些 hack 的味道。我們更期望一種原生的語法來選擇不同的圖片，值得慶幸的是 CSS Image Level 4 中就實現了這種原生語法的「image-set」。

「image-set」語法：

<image-set> = image-set( [ <image-set-decl>,]* [ <image-set-decl> | <color>] )
<image-set-decl> = [ <image> | <string> ] <resolution>

那麼上面的例子我們可以改爲：

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(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png) 2x);/* Retina */

這裏的單位「x」等同於「dppx」，將來是否統一還有待進一步討論。注意 Webkit 目前只實現了 url() 形式的取值，color、*-gradient() 等暫不支持，而且「x」取負值似乎也是合法的。

以下是一些常見移動設備的「min-device-pixel-ratio」值：

-webkit-min-device-pixel-ratio: 1.0

1. 所有非 Retina 的 Mac
2. 所有非 Retina 的 iOS 設備
3. Acer Iconia A500
4. Samsung Galaxy Tab 10.1
5. Samsung Galaxy S
6. 其他設備

-webkit-min-device-pixel-ratio: 1.3

1. Google Nexus 7

-webkit-min-device-pixel-ratio: 1.5

1. Google Nexus S
2. Samsung Galaxy S II
3. HTC Desire
4. HTC Incredible S
5. HTC Velocity
6. HTC Sensation

-webkit-min-device-pixel-ratio: 2.0

1. iPhone 4
2. iPhone 4S
3. iPhone 5
4. iPad (3rd generation)
5. iPad 4
6. 所有 Retina displays 的 Mac
7. Google Galaxy Nexus
8. Google Nexus 4
9. Google Nexus 10
10. Samsung Galaxy S III
11. Samsung Galaxy Note II
12. Sony Xperia S
13. HTC One X

-webkit-min-device-pixel-ratio: 3.0

1. HTC Butterfly
2. Sony Xperia S

查看原文地址請參考：http://mingkr.com/css3-response-img