【转】CSS 与 HTML5 响应式图片
關(guān)于響應(yīng)式的，近來(lái)國(guó)內(nèi)外也不斷提到，還是目前比較流行的技術(shù)話題，這篇文章來(lái)至淘寶UED的，講得是響應(yīng)式圖片，寫(xiě)得很不錯(cuò)。
?隨著?Retina 屏幕的逐漸普及，網(wǎng)頁(yè)中對(duì)圖片的適配要求也越來(lái)越高。如何讓圖片在放大了兩倍的?Retina?屏幕顯示依然清晰，曾經(jīng)一度困擾著網(wǎng)頁(yè)開(kāi)發(fā)者，好在?CSS3 與 HTML5 已經(jīng)著力在改變這種現(xiàn)狀。那么到底什么是響應(yīng)式圖片呢？
什么是響應(yīng)式圖片？
響應(yīng)式圖片是指：用戶代理根據(jù)輸出設(shè)備的分辨率不同加載不同類(lèi)型的圖片，不會(huì)造成帶寬的浪費(fèi)。同時(shí)，在改變輸出設(shè)備類(lèi)型或分辨率時(shí)，能及時(shí)加載對(duì)應(yīng)類(lèi)型的圖片。
CSS3 響應(yīng)式圖片
對(duì)于很多 IOS 開(kāi)發(fā)者來(lái)說(shuō)可能已經(jīng)不太陌生了，為了適配 Retina?屏幕，傳統(tǒng)的 CSS3 實(shí)現(xiàn)方式是通過(guò)加載一張寬高分別放大兩倍的圖片，然后通過(guò)?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), /* 標(biāo)準(zhǔn) */only screen and (min-resolution: 2dppx) /* 標(biāo)準(zhǔn) */ { .mod .hd h3{background-image:url(http://img04.taobaocdn.com/tps/i4/T1947tXmJhXXcCfooh-210-320.png);background-size: 105px 155px; } }兩張圖片的對(duì)比效果：
在制作@2x圖片時(shí)需要注意一些問(wèn)題：
如果類(lèi)似上圖一樣是純文字內(nèi)容的圖片，不要直接從大圖片縮放為小圖片，這樣文字效果會(huì)有些失真，這是 Photoshop 渲染的問(wèn)題。應(yīng)該調(diào)整字號(hào)，再重新排版。可以直接看看：一淘首頁(yè)?的效果。
藍(lán)框內(nèi)是直接縮放圖片大小的效果，紅框內(nèi)是把字號(hào)從32號(hào)改成16號(hào)的效果。
CSS3 Media Queries?中用來(lái)定義設(shè)備分辨率的是?「resolution」?媒體特性，同時(shí)派生出兩個(gè)媒體特性，分別是 「min-resolution」和?「max-resolution」。該規(guī)范中規(guī)定：若查詢(xún)?Non-Square Pixels?（專(zhuān)業(yè)術(shù)語(yǔ)，指高度與寬度不等的像素，可以理解為「非正方形像素」。計(jì)算機(jī)屏幕上及高清晰度視頻信號(hào)中的像素是正方形的（像素寬高比為?1:1）。標(biāo)準(zhǔn)清晰度數(shù)碼視頻信號(hào)中的像素都不是正方形的。例如：NTSC制式的像素高度大于寬度，而PAL制式的像素寬度則大于高度。）設(shè)備，在「min-resolution」查詢(xún)中指定的值必須與最稀疏尺寸進(jìn)行比較，在「max-resolution」查詢(xún)中必須與最密集尺寸進(jìn)行比較。對(duì)于「resolution」（沒(méi)有「min-」或「max-」前綴）從不查詢(xún)?Non-Square Pixels?設(shè)備。另外在 CSS image Level 3「image-resolution」屬性中定義了一些單位，比如「dppx」，各瀏覽器支持情況如下：
?
| 基本特性 | 不支持「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 之前錯(cuò)誤的接受了整數(shù)數(shù)值（不帶單位），16 開(kāi)始支持?dppx 單位。
- 「3」Change our implementation of the resolution media query to use CSS units。
- 「4」David Barr?在 Webkit 實(shí)現(xiàn)了 CSS3「image-resolution」屬性， 并且支持了?dppx，dpi?和?dpcm?單位，具體 Chrome 哪個(gè)版本開(kāi)始支持可以自行測(cè)試，相信 ?Media Queries?中很快也會(huì)支持了。
需要注意幾點(diǎn)：
顯而易見(jiàn)，通過(guò)?Media Queries?來(lái)實(shí)現(xiàn)「響應(yīng)式圖片」還是很麻煩，CSS 代碼的可維護(hù)性不高，有一些 hack 的味道。我們更期望一種原生的語(yǔ)法來(lái)選擇不同的圖片，值得慶幸的是?CSS Image?Level 4?中就實(shí)現(xiàn)了這種原生語(yǔ)法的「image-set」。
「image-set」語(yǔ)法：
<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」，將來(lái)是否統(tǒng)一還有待進(jìn)一步討論。注意?Webkit 目前只實(shí)現(xiàn)了 url() 形式的取值，color、*-gradient() 等暫不支持，而且「x」取負(fù)值似乎也是合法的。
以下是一些常見(jiàn)移動(dòng)設(shè)備的「min-device-pixel-ratio」值：
-webkit-min-device-pixel-ratio: 1.0
- 所有非 Retina 的 Mac
- 所有非?Retina 的 iOS 設(shè)備
- Acer Iconia A500
- Samsung Galaxy Tab 10.1
- Samsung Galaxy S
- 其他設(shè)備
-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
HTML5 響應(yīng)式圖片
CSS「image-set」 解決了背景圖片的響應(yīng)式問(wèn)題，但是 HTML中的 img 元素怎么辦呢？正當(dāng)我一籌莫展的時(shí)候，2011年11月?@brucel?提出了HTML5 的一個(gè)解決草案：
<picture alt=""> <source src=hires.png media="min-width:800px"> <source src=midres.png media="min-width:480px"> <source src=lores.png> <!-- 不支持的瀏覽器降級(jí)處理 --> <img src=midres.png alt=""> </picture>于此同時(shí)，其他的一些想法如雨后春筍般涌現(xiàn)出來(lái)，于是?W3C?社區(qū)討論組?Responsive Images?Community Group??應(yīng)運(yùn)而生。最新的規(guī)范在這里：http://picture.responsiveimages.org/?。截止本文發(fā)布時(shí)間，最近一次更新是?2013年1月7日，規(guī)范示例：
<picture width="500" height="500"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> <source srcset="small-1.jpg 1x, small-2.jpg 2x"> <img src="small-1.jpg" alt=""> <p>Accessible text</p> </picture>可以看到這里的「srcset」屬性類(lèi)似「image-set」，通常情況下，「srcset」里面的資源是具有 fallback 特性的，也就是說(shuō)第一個(gè)圖片資源無(wú)法加載的時(shí)候可以跳過(guò)加載后面的備用資源。
但是 Apple 的?eoconnor?提出的方案是這樣的：
<img src="foo-lores.jpg"srcset="foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x"alt="decent alt text for foo.">誠(chéng)然，任何一個(gè)新標(biāo)準(zhǔn)的提出，都會(huì)存在各種不同的聲音，這是好事，作為網(wǎng)頁(yè)的最終開(kāi)發(fā)者其實(shí)并不太關(guān)心實(shí)現(xiàn)語(yǔ)法。有任何問(wèn)題大家也可以直接到?HTML5 中文興趣小組參與討論。
小結(jié)
本來(lái)想把新年的第一篇文章寫(xiě)的歡樂(lè)一些，不過(guò)貌似沒(méi)啥槽點(diǎn)。HTML5 響應(yīng)式圖片的草案還剛剛開(kāi)始，但是前景還是很美好的。目前我們能做的就是在CSS 中使用「image-set」屬性值，因?yàn)槟壳按蟛糠?Retina 屏幕的設(shè)備的瀏覽器都是基于 Webkit 內(nèi)核的，如果有特殊的需求可以使用 Media Queries。
非常感謝?kenny 對(duì)本文排版細(xì)節(jié)提出的 14 條建議，本文排版遵循：
- 使用繁體中文引號(hào) 「」代替簡(jiǎn)體中文「“”」引號(hào)；
- 中英文混排時(shí)英文首尾各加一個(gè)空格。
原文地址：http://www.iyunlu.com/view/Front-end/70.html
總結(jié)
以上是生活随笔為你收集整理的【转】CSS 与 HTML5 响应式图片的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 解除svn控制下的文件夹的svn的控制
- 下一篇： 科技