指定多個運算單元寬度

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 屬性搭配使用)