譯文出處：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寬度描述符的威力，但他們同時(shí)也面臨著新挑戰(zhàn)－當(dāng)圖片開始下載時(shí)瀏覽器知道的只有視窗尺寸。

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

Sizes屬性必不可少！

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

事實(shí)上，sizes只有在使用寬度描述符時(shí)才有意義。如果使用顯示密度描述符的話，就不需要sizes屬性。因?yàn)闉g覽器會(huì)不知道如何處理它。

Sizes語(yǔ)法

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

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

我要重申這點(diǎn)因?yàn)檫@是理解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一樣，每個(gè)由逗號(hào)分隔的項(xiàng)目包含兩個(gè)由空格分隔的值。

媒體情況

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

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

長(zhǎng)度

每個(gè)逗號(hào)分隔項(xiàng)的第二個(gè)值是長(zhǎng)度。長(zhǎng)度單位通常是視窗寬度（vw）。

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

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

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

瀏覽器如何選擇正確的sizes

瀏覽器開始讀取逗號(hào)分隔列表值時(shí)，它會(huì)獲取符合媒體情況的第一個(gè)值。

來(lái)看一下我們的樣例標(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">

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

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

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

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

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

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

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

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

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

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

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

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

有。絕對(duì)有。

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

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

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

Srcset和sizes ＝ 智能瀏覽器

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

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