指定多個運算單元寬度

凱蒂漢佩尼斯
Katie Hempenius
X

試用此示範模式

  • 如要預覽網站，請按下「查看應用程式」，然後按下「全螢幕」圖示 全螢幕。

  • 以不同大小的瀏覽器視窗重新載入應用程式，即可查看瀏覽器載入不同圖片，並根據不同瀏覽器大小使用不同的版面配置。

查看程式碼

  • 查看 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%」、「可視區域寬度的 50%」，在寬度超過 1024 像素的螢幕上則為 800 像素。這些寬度會與 CSS 中指定的寬度相符。

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

如何指定多個版位寬度

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

  • 可以使用多種單位指定版位寬度。以下是所有有效的寬度：

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

以下的寬度無效：

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