響應(yīng)式布局提高篇 - 圖片正確的打開(kāi)方式

圖片在 Web 中占有非常重要的地位，一方面，一圖勝千言，圖片作為內(nèi)容的載體，能夠有效傳遞出信息；另一方面，圖片占網(wǎng)頁(yè)流量消耗的 60%，對(duì)網(wǎng)頁(yè)的大小和加載速度有很大的影響。

隨著終端設(shè)備日益豐富，人們更多地通過(guò)各種尺寸的小屏瀏覽網(wǎng)頁(yè)，經(jīng)常發(fā)生圖片過(guò)大導(dǎo)致網(wǎng)頁(yè)布局混亂的情況，非常影響用戶體驗(yàn)。因此圖片需要根據(jù)設(shè)備類(lèi)型和尺寸進(jìn)行自適應(yīng)調(diào)整，才能保證網(wǎng)站在各個(gè)終端獲得相似的使用體驗(yàn)。

要做到圖片自適應(yīng)寬度，一個(gè)簡(jiǎn)單的方法是，給圖片設(shè)置?max-width: 100%，這確實(shí)非常有作用，圖片不會(huì)溢出或者頁(yè)面出現(xiàn)橫向滾動(dòng)條，那還有沒(méi)有其他需要我們注意的呢？

在使用高清屏幕設(shè)備（比如 iPhone X）瀏覽網(wǎng)站時(shí)我們會(huì)發(fā)現(xiàn)，一些圖片看起來(lái)比較模糊，而在普通屏幕設(shè)備中卻沒(méi)有那么模糊，這是為什么呢？

這里需要用到在上一章中提到的幾個(gè)概念，為方便起見(jiàn)，我們一起來(lái)回顧一下：

物理像素（設(shè)備像素）

一個(gè)物理像素代表的就是最小的物理顯示單元，在同一個(gè)設(shè)備中，物理像素點(diǎn)的大小是固定的，數(shù)量也是固定的。比如 iPhone X 的物理像素是 1125x2436。

邏輯像素（CSS 像素、設(shè)備獨(dú)立像素）

邏輯像素是一個(gè)抽象單位，與設(shè)備無(wú)關(guān)，在不同的設(shè)備中呈現(xiàn)的大小是一致的，比如邏輯像素為 10x10 的方塊，在手機(jī)和顯示器看上去大小是一樣的，這樣可以保持閱讀體驗(yàn)的一致，同時(shí)也方便開(kāi)發(fā)。iPhone X 的邏輯像素是 375x812。

設(shè)備像素比（Device Pixel Ratio，DPR）

根據(jù)以上兩個(gè)概念，可以自然地想到，在一個(gè)設(shè)備中邏輯像素與物理像素的比值是確定的，一個(gè)邏輯像素覆蓋了多個(gè)物理像素，這可以用設(shè)備像素比來(lái)表示。比如 iPhone X，375x812 的邏輯像素包含了 1125x2436 的物理像素，設(shè)備像素比的值就是 3?？梢酝ㄟ^(guò)下圖進(jìn)一步理解上面三個(gè)概念之間的關(guān)系。

有了上面的概念，就能簡(jiǎn)單地解釋圖片為什么會(huì)變模糊。舉個(gè)例子，分別在普通屏（DRP = 1）和 Retina 屏（DPR = 2）用 CSS 像素為 300x400 的??顯示分辨率是 300x400 的圖片。

對(duì)于普通屏，圖像像素和物理像素 1:1，圖像不失真。而對(duì)于 Retina 屏，圖像像素和物理像素 1:4，由于每個(gè)圖像像素不可分割，物理像素就近取色，從而讓圖片變得模糊。這種情況需要使用分辨率更高的圖片，比如分辨率為 600x800，圖像像素和物理像素 1:1，這樣就能充分利用 Retina 屏幕的物理像素點(diǎn)，顯示出更清晰的圖片。

如果在普通屏下也使用分辨率為 600x800 的圖片，圖像像素和物理像素 4:1，物理像素點(diǎn)只能通過(guò)采樣，用不足的數(shù)量來(lái)顯示圖片。這不僅沒(méi)有發(fā)揮出高清圖片的優(yōu)勢(shì)，還由于圖片的增大而造成了帶寬的浪費(fèi)。

由此可以發(fā)現(xiàn)，為了更好地在各種終端設(shè)備顯示圖片，需要考慮設(shè)備像素比、圖像分辨率、渲染尺寸等因素，如果只是簡(jiǎn)單地加載圖片然后修改樣式適應(yīng)寬度，并不能保證顯示效果和加載速度，甚至?xí)蟠蠼档陀脩舻氖褂皿w驗(yàn)。因此，需要采用合適的方法對(duì)圖片進(jìn)行響應(yīng)式設(shè)計(jì)。

根據(jù)前面的分析，圖片的響應(yīng)式設(shè)計(jì)與渲染尺寸（圖片顯示大小，?的 CSS 像素）有關(guān)，而渲染尺寸通常由設(shè)備的視口大小決定，因此就需要一種方法對(duì)設(shè)備的視口大小進(jìn)行判斷。

CSS 中的媒體查詢提供了相關(guān)的判斷方法，可以根據(jù)不同的設(shè)備特征應(yīng)用不同樣式。媒體查詢支持很多設(shè)備特征，由于本章主要介紹響應(yīng)式圖片，實(shí)際主要用到其中的視口的寬度和設(shè)備方向，如下表所示。

更多關(guān)于媒體查詢的介紹可以參考 MDN 上的文檔《CSS 媒體查詢》(https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries)。

對(duì)于?min-width?和?max-width?的取值，我們稱為斷點(diǎn)（Breakpoints）。如何選擇斷點(diǎn)，主要取決于產(chǎn)品設(shè)計(jì)本身，沒(méi)有萬(wàn)能媒體查詢的代碼。但經(jīng)過(guò)實(shí)踐，我們也總結(jié)了一套比較具有代表性的設(shè)備斷點(diǎn)。

如果要對(duì)細(xì)分屏幕大小進(jìn)行適配，可以查看這篇文章，里面列出了詳細(xì)的常見(jiàn)設(shè)備的媒體查詢條件，《media queries for common device breakpoints》(https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints/)。

前面說(shuō)了這么多，終于到大家最為關(guān)心的部分了。不過(guò)先別急，在動(dòng)手之前，還有一個(gè)問(wèn)題是需要我們?nèi)ニ伎嫉?，那就是在根?jù)設(shè)備特征選用不同的圖片時(shí)，是否需要更改比例、裁剪甚至替換整個(gè)圖片，或者只是僅僅更改圖片的分辨率。前者被稱為藝術(shù)方向（art direction），后者被稱為分辨率切換（resolution switching），下面先介紹分辨率切換。

分辨率切換

分辨率切換主要用于優(yōu)化低分辨率設(shè)備的帶寬消耗，通常使用在如下場(chǎng)景：開(kāi)發(fā)者提供圖片的多個(gè)分辨率版本，大屏和高清屏用戶獲取高分辨率版本，小屏用戶獲取低分辨率版本。以下是實(shí)現(xiàn)分辨率切換的代碼例子：

下面具體介紹這兩個(gè)屬性的用法。

srcset

一般形式：

srcset="[url] [num][descriptor], [url] [num][descriptor], …"

指定了一組可選的源，源之間用逗號(hào)分隔，每個(gè)源由兩部分組成：

1. 圖片的 url

2. 正整數(shù)+寬度描述符?w?或者 正浮點(diǎn)數(shù)+像素密度描述符?x，如果該項(xiàng)為空，則默認(rèn)為?1x

瀏覽器會(huì)通過(guò)描述符來(lái)選擇對(duì)應(yīng)的源，如果使用密度描述符?x，則判斷哪一項(xiàng)與設(shè)備像素比更接近，例如：

<img srcset="1200x800.jpg 2.5x,?????????????800x600.jpg?2x, 600x400.jpg 1.5x" src="500x400.jpg">

在 DPR = 2 的 iPhone 6 中會(huì)加載 800x600 的圖片。

對(duì)于寬度描述符?w，由于需要與?sizes?屬性一起使用，因此會(huì)在下面和?sizes?屬性一起介紹。

sizes

一般形式：

sizes="[media-query] [size], [media-query] [size], …, [size]"

指定了一組可選的 size，size 之間用逗號(hào)分隔，每個(gè) size 由兩部分組成：

1. 媒體查詢，但是不能存在于最后一項(xiàng)，因?yàn)樽詈笠豁?xiàng)用作默認(rèn)值

2. 圖片的 size（CSS 像素），可用 px、em、vw 等單位

當(dāng)?srcset?屬性使用?w?時(shí)，sizes 屬性才會(huì)起作用，瀏覽器會(huì)根據(jù)下面的順序加載圖片。

1. 瀏覽器逐項(xiàng)判斷?sizes?屬性中的媒體查詢條件，當(dāng)為真時(shí)取該項(xiàng)的 size 作為圖片的大小信息，如果? 的 CSS 樣式?jīng)]有指定大小，則會(huì)使用 size 作為??的大小

2. 根據(jù) size 和設(shè)備像素比，兩者相乘得出圖片的分辨率

3. 從?srcset?的寬度描述符中選出不小于所得分辨率中最接近的一項(xiàng)，沒(méi)有則選最大的一項(xiàng)，取該項(xiàng)作為圖片的源

例如：

<img srcset="1200x800.jpg 1200w, 700x500.jpg 700w, 500x400.jpg 500w, 300x200.jpg 300w" sizes="(max-width: 480px) 350px,  (max-width: 800px) 650px,  1000px" src="500x400.jpg">

在 DPR = 1 和視口寬度 = 440px 的情況下，根據(jù)?sizes?屬性獲得 size 為 350px，計(jì)算 350x1 = 350，在?srcset?中不小于 350 又最接近的是 500w，所以會(huì)選擇加載 500w 對(duì)應(yīng)的 500x400 圖片。

以上就是?srcset?和?sizes?的用法，需要注意的是，以下情況是不正確的：

• 在同一個(gè)?srcset?中混合使用了?x?和?w

• 在同一個(gè)?srcset?有重復(fù)的描述符，比如有兩項(xiàng)都是?2x

另外值得一提的是，當(dāng)我們使用?srcset?屬性時(shí)，實(shí)際上是向?yàn)g覽器提供相關(guān)信息，讓瀏覽器作出更好的選擇，瀏覽器可能還會(huì)根據(jù)用戶的偏好、網(wǎng)絡(luò)條件等因素調(diào)整選擇。而這個(gè)特點(diǎn)，就是接著要介紹的??與?+srcset?之間的重要區(qū)別之一。

如果對(duì)?srcset?和?sizes?還想了解更多，可以訪問(wèn) MDN 的文檔《響應(yīng)式圖片》(https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)。

藝術(shù)方向

藝術(shù)方向聽(tīng)上去可能比較讓人費(fèi)解，但如果用例子來(lái)解釋就會(huì)非常簡(jiǎn)單?？紤]如下情況：

我們提到將圖片的?max-width?設(shè)置為 100%，圖片就會(huì)在手機(jī)屏幕上壓縮到視口的寬度，如果這張圖片實(shí)際上很大，圖片中的內(nèi)容就會(huì)看不清，特別是如果圖片主要內(nèi)容集中在中間，如人像，瀏覽效果會(huì)比較差。遇到這樣的情況，最好的方式是在不同的屏幕尺寸下采用不同的圖片，讓主要內(nèi)容保持在視口中間，如下圖。