指定多個運算單元寬度

Katie Hempenius
Katie Hempenius
X

試用這個示範

  • 如要預覽網站，請按下「View App」，然後按下「Fullscreen」全螢幕。

  • 在不同大小的瀏覽器視窗中重新載入應用程式，觀察瀏覽器在不同大小下，如何載入不同圖片及使用不同版面配置。

查看程式碼

  • 請查看 index.html，瞭解如何編寫程式碼來實現這項功能：
<img src="flower.jpg"
  srcset="flower-small.jpg 480w, flower-large.jpg 800w"
  sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px">

這是怎麼回事？

sizes 屬性的值會決定圖片顯示寬度：在寬度不超過 480 像素的檢視區中，圖片寬度為「檢視區寬度的 100%」；在寬度為 481 至 1024 像素的螢幕上，圖片寬度為「檢視區寬度的 50%」；在寬度超過 1024 像素的螢幕上，圖片寬度為 800 像素。這些寬度與 CSS 中指定的寬度相符。

您可以指定多個版位寬度，以配合不同可視區域大小使用不同樣式 (即圖片寬度) 的網頁版面配置。

如何指定多個版位寬度

  • 如要指定多個版位寬度，請使用以半形逗號分隔的清單。除了最後一個項目外，每個清單項目都包含媒體條件 (例如 max-width 或 min-width) 和版位寬度。
  • 這份清單中的最後一個項目是預設版位寬度。這是預設值，因此您不需要指定媒體條件。
  • 您可以列出任意數量的版位寬度，srcset 中列出的圖片數量並不重要。

  • 您可以使用多種單位指定時段寬度。以下皆為有效寬度：

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

以下寬度無效：

  • 25% (百分比無法與 sizes 屬性搭配使用)