指定多個運算單元寬度

Katie Hempenius
Katie Hempenius

  • 如要預覽網站,請按下「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-widthmin-width) 和版位寬度。
  • 清單中的最後一個項目是預設的版面寬度。這是預設值,因此您不需要指定媒體條件。
  • 您可以列出任意數量的版位寬度,srcset 中列出的圖片數量不受限制。
  • 您可以使用各種單位指定插槽寬度。以下為有效的寬度:

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

以下不是有效的寬度:

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