> 譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-5-sizes.html > 英文原文：http://blog.cloudfour.com/responsive-images-101-part-5-sizes/ 上一次我們已經發現了[`srcset`寬度描述符](http://www.w3cplus.com/responsive/responsive-images-101-part-4-srcset-width-descriptors.html)的威力，但他們同時也面臨著新挑戰－當圖片開始下載時瀏覽器知道的只有視窗尺寸。 現在，是時候認識這篇故事里的英雄了：`sizes`屬性。  ## Sizes屬性必不可少！ 使用`srcset`寬度描述符時都需要`sizes`屬性。 事實上，`sizes`只有在使用寬度描述符時才有意義。如果使用顯示密度描述符的話，就不需要`sizes`屬性。因為瀏覽器會不知道如何處理它。 ### Sizes語法 最初，在所有響應式圖片的新標準中，sizes是我最難想通的一個屬性。  像`srcset`一樣，`sizes`屬性包含一個逗號分隔的列表。這個逗號分隔列表描述了根據視口而變化的圖片尺寸。 我要重申這點因為這是理解`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"> ~~~ 像`srcset`一樣，每個由逗號分隔的項目包含兩個由空格分隔的值。 ### 媒體情況 第一個值是媒體情況。媒體情況類似于媒體查詢，但功能不全，必入，你不能寫`@media screen`，但是可以做想要在某個尺寸上做的任何事情。 通常，媒體情況會類似于`(max-width:480px)`或者也許是`(min-width:480px)`。 ### 長度 每個逗號分隔項的第二個值是長度。長度單位通常是視窗寬度（`vw`）。 很有可能你之前沒見過`vw`單位。它確實很新，但是在[當今瀏覽器里已經被廣泛支持](http://caniuse.com/#feat=viewport-units)。 每個`vw`單位代表視窗寬度的`1%`，那么`100vw`就是`100%`視窗寬度而`33vw`就是`33%`視窗寬度。 長度不一定要用視窗寬度單位。長度可以是任何長度單位包括絕對和相對長度。你甚至可以用CSS?`calc()`來動態計算`margin`。 ### 瀏覽器如何選擇正確的sizes 瀏覽器開始讀取逗號分隔列表值時，它會獲取符合媒體情況的第一個值。 來看一下我們的樣例標簽和`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"> ~~~ 翻譯成的指令的符號列表，結果如下： * **`(max-width: 480px) 100w`**：視窗等于或小于`480px`，圖片是`100%`視窗寬度。 * **`(max-width: 900px)?33w`**：視窗等于或小于`900px`，因為之前的媒體情況這個規則永遠不會生效。因此，規則生效意味著視窗寬度為`481px`到`900px`。視窗寬度從`901px`寬到無限大的情況下，圖片寬度為`254px`。 * **`254px`**：當前沒有媒體情況列表，在沒有其他媒體情況滿足的情況下長度為默認值。在這種情況下，媒體情況要包含尺寸為`900px`的視窗。因此，視窗寬度從`901px`到無限大，圖片寬度為`254px`。 為了幫助大家形成概念，我制作了一段視頻，關于Walmart Grocery網站上的值如何隨著視口尺寸擴大而變化。 *注：視頻需要翻墻才能瀏覽。* **注意：**在本文發布時，Walmart Grocery網站沒有使用`srcset`和`sizes`。這些都是假設的標記。想要實際觀察`srcset`和`sizes`，請訪問最近才開始使用`srcset`和`sizes`的[The Guardian](http://theguardian.com/)。 ## 如果把內容和表現分離呢？ 我看到許多關于響應式圖片新規范的吐槽。大多數人抱怨其復雜性而忽視事實上網頁中的圖片本來就很復雜以及[WWIC]((http://www.ftrain.com/wwic.html)的一些變化。 但是有一個吐槽我個人非常贊同，現在我們在標簽上添加信息表示——**圖片尺寸**。我好奇是否有任何一個參與響應式圖片標準制定的人在某種程度上提出過這種擔憂。 不幸的是，這是不可避免的。像在[第4部分](http://www.w3cplus.com/responsive/responsive-images-101-part-4-srcset-width-descriptors.html)中談到的那樣，瀏覽器在不知道頁面圖片尺寸的情況下就開始下載圖片資源了。 唯一支持預加載和確保下載正確資源的方式是在標簽中提供圖片尺寸信息。 ## 預加載究竟值的嗎？ 如果你像我一樣思考，也許會懷疑預加載會帶來那么多問題的話那它本身還有價值嗎？ 有。絕對有。  Andy Davies[寫了一篇文章](http://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/)關于使用預加載后Google和Firefox在平均頁面加載速度上分別提升了`20%`和`10%`。Steve Souders認為“預加載是瀏覽器實現的[單個最佳的表現改進](http://www.stevesouders.com/blog/2013/04/26/i/)。” 我們不能簡單把網頁的優秀表現歸功于響應式圖片。 因此，我們需要找到一個平衡點。`sizes`屬性就是平衡點。它提供給瀏覽器完成工作的恰當信息。 ## Srcset和sizes ＝ 智能瀏覽器 `srcset`和`sizes`提供了所有在分辨率切換情況下需要的功能。它給瀏覽器提供恰當的信息來讓瀏覽器做出明智的決定。  但是如果你想要更多的控制該怎么辦呢？遇到藝術切換該怎么辦？我們將在下一節中向大家介紹有關于這方面的知識——**`<picture>`元素**。