譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-5-sizes.html
英文原文：http://blog.cloudfour.com/responsive-images-101-part-5-sizes/

上一次我們已經(jīng)發(fā)現(xiàn)了srcset寬度描述符的威力，但他們同時也面臨著新挑戰(zhàn)－當(dāng)圖片開始下載時瀏覽器知道的只有視窗尺寸。

現(xiàn)在，是時候認(rèn)識這篇故事里的英雄了：sizes屬性。

Sizes屬性必不可少！

使用srcset寬度描述符時都需要sizes屬性。

事實上，sizes只有在使用寬度描述符時才有意義。如果使用顯示密度描述符的話，就不需要sizes屬性。因為瀏覽器會不知道如何處理它。

Sizes語法

最初，在所有響應(yīng)式圖片的新標(biāo)準(zhǔn)中，sizes是我最難想通的一個屬性。

像srcset一樣，sizes屬性包含一個逗號分隔的列表。這個逗號分隔列表描述了根據(jù)視口而變化的圖片尺寸。

我要重申這點因為這是理解sizes屬性的關(guān)鍵。

我們告訴瀏覽器多大尺寸的圖片與多大尺寸的視窗相關(guān)。并且能讓瀏覽器知道根據(jù)視口尺寸的變化它們之間的關(guān)系如何變化。

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

像srcset一樣，每個由逗號分隔的項目包含兩個由空格分隔的值。

媒體情況

第一個值是媒體情況。媒體情況類似于媒體查詢，但功能不全，必入，你不能寫@media screen，但是可以做想要在某個尺寸上做的任何事情。

通常，媒體情況會類似于(max-width:480px)或者也許是(min-width:480px)。

長度

每個逗號分隔項的第二個值是長度。長度單位通常是視窗寬度（vw）。

很有可能你之前沒見過vw單位。它確實很新，但是在當(dāng)今瀏覽器里已經(jīng)被廣泛支持。

每個vw單位代表視窗寬度的1%，那么100vw就是100%視窗寬度而33vw就是33%視窗寬度。

長度不一定要用視窗寬度單位。長度可以是任何長度單位包括絕對和相對長度。你甚至可以用CSS?calc()來動態(tài)計算margin。

瀏覽器如何選擇正確的sizes

瀏覽器開始讀取逗號分隔列表值時，它會獲取符合媒體情況的第一個值。

來看一下我們的樣例標(biāo)簽和sizes屬性的順序。

<img src="cat.jpg" alt="cat"
  srcset="cat-160.jpg 160w, cat-320.jpg 320w, cat-640.jpg 640w, cat-1280.jpg 1280w"
  sizes="(max-width: 480px) 100vw, (max-width: 900px) 33vw, 254px">

翻譯成的指令的符號列表，結(jié)果如下：

• (max-width: 480px) 100w：視窗等于或小于480px，圖片是100%視窗寬度。
• (max-width: 900px)?33w：視窗等于或小于900px，因為之前的媒體情況這個規(guī)則永遠(yuǎn)不會生效。因此，規(guī)則生效意味著視窗寬度為481px到900px。視窗寬度從901px寬到無限大的情況下，圖片寬度為254px。
• 254px：當(dāng)前沒有媒體情況列表，在沒有其他媒體情況滿足的情況下長度為默認(rèn)值。在這種情況下，媒體情況要包含尺寸為900px的視窗。因此，視窗寬度從901px到無限大，圖片寬度為254px。

為了幫助大家形成概念，我制作了一段視頻，關(guān)于Walmart Grocery網(wǎng)站上的值如何隨著視口尺寸擴(kuò)大而變化。

注：視頻需要翻墻才能瀏覽。

注意：在本文發(fā)布時，Walmart Grocery網(wǎng)站沒有使用srcset和sizes。這些都是假設(shè)的標(biāo)記。想要實際觀察srcset和sizes，請訪問最近才開始使用srcset和sizes的The Guardian。

如果把內(nèi)容和表現(xiàn)分離呢？

我看到許多關(guān)于響應(yīng)式圖片新規(guī)范的吐槽。大多數(shù)人抱怨其復(fù)雜性而忽視事實上網(wǎng)頁中的圖片本來就很復(fù)雜以及[WWIC]((http://www.ftrain.com/wwic.html)的一些變化。

但是有一個吐槽我個人非常贊同，現(xiàn)在我們在標(biāo)簽上添加信息表示——圖片尺寸。我好奇是否有任何一個參與響應(yīng)式圖片標(biāo)準(zhǔn)制定的人在某種程度上提出過這種擔(dān)憂。

不幸的是，這是不可避免的。像在第4部分中談到的那樣，瀏覽器在不知道頁面圖片尺寸的情況下就開始下載圖片資源了。

唯一支持預(yù)加載和確保下載正確資源的方式是在標(biāo)簽中提供圖片尺寸信息。

預(yù)加載究竟值的嗎？

如果你像我一樣思考，也許會懷疑預(yù)加載會帶來那么多問題的話那它本身還有價值嗎？

有。絕對有。

Andy Davies寫了一篇文章關(guān)于使用預(yù)加載后Google和Firefox在平均頁面加載速度上分別提升了20%和10%。Steve Souders認(rèn)為“預(yù)加載是瀏覽器實現(xiàn)的單個最佳的表現(xiàn)改進(jìn)?！?/p>

我們不能簡單把網(wǎng)頁的優(yōu)秀表現(xiàn)歸功于響應(yīng)式圖片。

因此，我們需要找到一個平衡點。sizes屬性就是平衡點。它提供給瀏覽器完成工作的恰當(dāng)信息。

Srcset和sizes ＝ 智能瀏覽器

srcset和sizes提供了所有在分辨率切換情況下需要的功能。它給瀏覽器提供恰當(dāng)?shù)男畔碜尀g覽器做出明智的決定。

但是如果你想要更多的控制該怎么辦呢？遇到藝術(shù)切換該怎么辦？我們將在下一節(jié)中向大家介紹有關(guān)于這方面的知識——<picture>元素。