指定多個運算單元寬度

Katie Hempenius
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 屬性的值規定圖片顯示寬度會是： 「100% 的可視區域寬度」寬度在高達 480 像素的可視區域中，「佔可視區域的 50%」 寬度」，在寬度大於 1024 像素的螢幕上，寬度為 481 到 1024 像素。這些 寬度會與 CSS 中指定的寬度一致

指定多個版位寬度的功能，也適用於使用 針對不同可視區域大小，採用不同的樣式 (也就是圖片寬度)。

如何指定多個版位寬度

  • 使用逗號分隔的清單指定多個版位寬度。每個清單項目 但最後一個項目除外，例如 max-width 或 min-width) 和版位寬度。
  • 這份清單中的最後一個項目是預設的運算單元寬度。此為預設值 您不必指定媒體條件
  • 您可以視需要列出多少版位寬度，也就是 srcset 沒有任何影響。

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

  • 100px

  • 33vw

  • 20em

  • calc(50vw-10px)

下列寬度無效：

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