CSS 與 HTML5 響應(yīng)式圖片

隨著 Retina 屏幕的逐漸普及，網(wǎng)頁中對(duì)圖片的適配要求也越來越高。如何讓圖片在放大了兩倍的 Retina 屏幕顯示依然清晰，曾經(jīng)一度困擾著網(wǎng)頁開發(fā)者，好在 CSS3 與 HTML5 已經(jīng)著力在改變這種現(xiàn)狀。那么到底什么是響應(yīng)式圖片呢？

什么是響應(yīng)式圖片？

響應(yīng)式圖片是指：用戶代理根據(jù)輸出設(shè)備的分辨率不同加載不同類型的圖片，不會(huì)造成帶寬的浪費(fèi)。同時(shí)，在改變輸出設(shè)備類型或分辨率時(shí)，能及時(shí)加載對(duì)應(yīng)類型的圖片。

CSS3 響應(yīng)式圖片

對(duì)于很多 IOS 開發(fā)者來說可能已經(jīng)不太陌生了，為了適配 Retina 屏幕，傳統(tǒng)的 CSS3 實(shí)現(xiàn)方式是通過加載一張寬高分別放大兩倍的圖片，然后通過 Media Queries 使背景圖片尺寸減小一倍「background-size:50% 50%;」，例如：

.mod .hd h3 {
    background-image:url(/upload/pic16/56383c4a1c2b0859e6017268a77eb4ad.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(/upload/pic16/4951366feefa5a1b3441cbaf2823ada8.png);
    background-size: 105px 155px;
}
}

兩張圖片的對(duì)比效果：

在制作@2x圖片時(shí)需要注意一些問題：

如果類似上圖一樣是純文字內(nèi)容的圖片，不要直接從大圖片縮放為小圖片，這樣文字效果會(huì)有些失真，這是 Photoshop 渲染的問題。應(yīng)該調(diào)整字號(hào)，再重新排版?？梢灾苯涌纯矗?a target="_blank">一淘首頁 的效果。

藍(lán)框內(nèi)是直接縮放圖片大小的效果，紅框內(nèi)是把字號(hào)從32號(hào)改成16號(hào)的效果。

CSS3 Media Queries 中用來定義設(shè)備分辨率的是 「resolution」 媒體特性，同時(shí)派生出兩個(gè)媒體特性，分別是 「min-resolution」和 「max-resolution」。該規(guī)范中規(guī)定：若查詢 Non-Square Pixels （專業(yè)術(shù)語，指高度與寬度不等的像素，可以理解為「非正方形像素」。計(jì)算機(jī)屏幕上及高清晰度視頻信號(hào)中的像素是正方形的（像素寬高比為 1:1）。標(biāo)準(zhǔn)清晰度數(shù)碼視頻信號(hào)中的像素都不是正方形的。例如：NTSC制式的像素高度大于寬度，而PAL制式的像素寬度則大于高度。）設(shè)備，在「min-resolution」查詢中指定的值必須與最稀疏尺寸進(jìn)行比較，在「max-resolution」查詢中必須與最密集尺寸進(jìn)行比較。對(duì)于「resolution」（沒有「min-」或「max-」前綴）從不查詢 Non-Square Pixels 設(shè)備。另外在 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 之前錯(cuò)誤的接受了整數(shù)數(shù)值（不帶單位），16 開始支持 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è)版本開始支持可以自行測(cè)試，相信  Media Queries 中很快也會(huì)支持了。

需要注意幾點(diǎn)：

1. 「-o-min-device-pixel-ratio」的取值是分?jǐn)?shù)比如「2 /3」，Demo，詳見：Opera Dev 的文章
2. Firefox 16 之前版本是「min–moz-device-pixel-ratio」，min 后面有兩個(gè)「-」。
3. 1dppx 相當(dāng)于 96dpi。

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

「image-set」語法：

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

那么上面的例子我們可以改為：

background-image:url(/upload/pic16/56383c4a1c2b0859e6017268a77eb4ad.png);/* 普通屏幕 */
background-image: -webkit-image-set(
    url(/upload/pic16/56383c4a1c2b0859e6017268a77eb4ad.png) 1x,
    url(/upload/pic16/4951366feefa5a1b3441cbaf2823ada8.png) 2x);/* Retina */

這里的單位「x」等同于「dppx」，將來是否統(tǒng)一還有待進(jìn)一步討論。注意 Webkit 目前只實(shí)現(xiàn)了 url() 形式的取值，color、*-gradient() 等暫不支持，而且「x」取負(fù)值似乎也是合法的。

以下是一些常見移動(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)式問題，但是 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)出來，于是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」屬性類似「image-set」，通常情況下，「srcset」里面的資源是具有 fallback 特性的，也就是說第一個(gè)圖片資源無法加載的時(shí)候可以跳過加載后面的備用資源。

但是 Apple 的 eoconnor 提出的方案是這樣的：

<img src="foo-lores.jpg"
    srcset="foo-hires.jpg 2x, 
    foo-superduperhires.jpg 6.5x"
    alt="decent alt text for foo.">

誠然，任何一個(gè)新標(biāo)準(zhǔn)的提出，都會(huì)存在各種不同的聲音，這是好事，作為網(wǎng)頁的最終開發(fā)者其實(shí)并不太關(guān)心實(shí)現(xiàn)語法。有任何問題大家也可以直接到 HTML5 中文興趣小組參與討論。

小結(jié)

本來想把新年的第一篇文章寫的歡樂一些，不過貌似沒啥槽點(diǎn)。HTML5 響應(yīng)式圖片的草案還剛剛開始，但是前景還是很美好的。目前我們能做的就是在CSS 中使用「image-set」屬性值，因?yàn)槟壳按蟛糠?nbsp;Retina 屏幕的設(shè)備的瀏覽器都是基于 Webkit 內(nèi)核的，如果有特殊的需求可以使用 Media Queries。

當(dāng)前題目：CSS 與 HTML5 響應(yīng)式圖片
網(wǎng)頁URL：http://www.bm7419.com/news42/165742.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、企業(yè)建站、網(wǎng)站制作、網(wǎng)站營銷、商城網(wǎng)站、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)