AMPHTML 版面配置系統

總覽

版面配置系統的主要目標是確保 AMP 元素可以表達其版面配置，以便執行階段能夠在任何遠端資源 (例如 JavaScript 和資料呼叫) 完成之前，推斷元素的大小。這點非常重要，因為這能大幅減少算繪和捲動延遲。

考量到這點，AMP 版面配置系統旨在支援少量但彈性的版面配置，以提供良好的效能保證。此系統仰賴一組屬性 (例如 layout、width、height、sizes 和 heights) 來表達元素的版面配置和大小調整需求。

行為

非容器 AMP 元素 (即 layout != container) 會在未解析/未建構模式下啟動，其中除了預留位置 (請參閱 placeholder 屬性) 之外，其所有子元素都會隱藏。完整建構元素所需的 JavaScript 和資料酬載可能仍在下載和初始化中，但 AMP 執行階段已知道如何僅依賴 CSS 類別和 layout、width、height 和 media 屬性來調整元素大小和版面配置。在大多數情況下，如果指定了 placeholder，則預留位置的大小和位置會佔用元素的所有空間。

一旦元素建構完成且首次版面配置完成，placeholder 就會隱藏。此時，預期元素的所有子元素都已正確建構和定位，並準備好顯示和接受讀者的輸入。這是預設行為。每個元素都可以覆寫以更快隱藏 placeholder 或使其保留更長時間等。

元素的大小和顯示方式取決於執行階段的 layout、width、height 和 media 屬性。所有版面配置規則都在內部透過 CSS 實作。如果元素的大小可透過 CSS 樣式推斷，且不會根據其子元素而變更 (立即或動態插入)，則稱該元素「定義大小」。這並不表示此元素的大小無法變更。版面配置可以是完全回應式的，例如 responsive、fixed-height、fill 和 flex-item 版面配置的情況。這僅表示大小不會在沒有明確使用者動作的情況下變更，例如在算繪或捲動期間或下載後。

如果元素設定不正確，在 PROD 環境中將不會算繪，而在 DEV 模式中，執行階段會以錯誤狀態算繪元素。可能的錯誤包括 layout、width 和 height 屬性的值無效或不受支援。

版面配置屬性

width 和 height

根據 layout 屬性的值，AMP 元件元素必須具有包含整數像素值的 width 和 height 屬性。實際版面配置行為取決於 layout 屬性，如下所述。

在少數情況下，如果未指定 width 或 height，AMP 執行階段可以將這些值預設為如下所示

• amp-pixel：width 和 height 都預設為 0。
• amp-audio：預設的 width 和 height 從瀏覽器推斷。

layout

AMP 提供一組版面配置，用於指定 AMP 元件在文件版面配置中的行為方式。您可以透過新增 layout 屬性以及下表指定的其中一個值來指定元件的版面配置。

範例：簡單的回應式圖片，其中寬度和高度用於決定長寬比。

<amp-img
  src="/img/amp.jpg"
  width="1080"
  height="610"
  layout="responsive"
  alt="an image"
></amp-img>

layout 屬性的支援值

sizes

所有支援 responsive 版面配置的 AMP 元素也支援 sizes 屬性。此屬性的值是 圖片尺寸中所述的尺寸表達式，但已擴展到所有元素，而不僅僅是圖片。簡而言之，sizes 屬性描述如何根據媒體條件計算元素的寬度。

當 sizes 屬性與 width 和 height 一起指定時，layout 會預設為 responsive。

範例：使用 sizes 屬性

在以下範例中，如果視窗寬度大於 320px，則圖片寬度將為 320px，否則，寬度將為 100vw (視窗寬度的 100%)。

<amp-img
  src="https://acme.org/image1.png"
  width="400"
  height="300"
  layout="responsive"
  sizes="(min-width: 320px) 320px, 100vw"
>
</amp-img>

disable-inline-width

sizes 屬性本身會在元素上設定內嵌 width 樣式。當將 disable-inline-width 與 sizes 配對時，AMP 元素會將 sizes 的值傳播到元素的基礎標記，就像 amp-img 內巢狀的 img 一樣，而不會像 sizes 通常在 AMP 中自行執行那樣設定內嵌 width。

範例：使用 disable-inline-width 屬性

在以下範例中，<amp-img> 元素的寬度不受影響，而 sizes 僅用於從 srcset 中選取其中一個來源。

<amp-img
  src="https://acme.org/image1.png"
  width="400"
  height="300"
  layout="responsive"
  sizes="(min-width: 320px) 320px, 100vw"
  disable-inline-width
>
</amp-img>

heights

所有支援 responsive 版面配置的 AMP 元素也支援 heights 屬性。此屬性的值是基於媒體表達式的尺寸表達式，類似於 圖片尺寸屬性，但有兩個主要差異

1. 它適用於元素的高度，而不是寬度。
2. 允許百分比值，例如 86%。如果使用百分比值，則表示元素寬度的百分比。

當 heights 屬性與 width 和 height 一起指定時，layout 會預設為 responsive。

範例：使用 heights 屬性

在以下範例中，圖片的高度預設為寬度的 80%，但如果視窗寬度大於 500px，則高度上限為 200px。由於 heights 屬性與 width 和 height 一起指定，因此版面配置預設為 responsive。

<amp-img
  src="https://acme.org/image1.png"
  width="320"
  height="256"
  heights="(min-width:500px) 200px, 80%"
>
</amp-img>

media

大多數 AMP 元素都支援 media 屬性。media 的值是媒體查詢。如果查詢不符，則元素根本不會算繪，並且其資源及其子資源可能不會擷取。如果瀏覽器視窗變更大小或方向，則會重新評估媒體查詢，並根據新結果隱藏和顯示元素。

範例：使用 media 屬性

在以下範例中，我們有 2 張具有互斥媒體查詢的圖片。根據螢幕寬度，將擷取和算繪這兩張圖片中的其中一張。media 屬性適用於所有 AMP 元素，因此它可以與非圖片元素 (例如廣告) 一起使用。

<amp-img
  media="(min-width: 650px)"
  src="wide.jpg"
  width="466"
  height="355"
  layout="responsive"
></amp-img>
<amp-img
  media="(max-width: 649px)"
  src="narrow.jpg"
  width="527"
  height="193"
  layout="responsive"
></amp-img>

placeholder

placeholder 屬性可以設定在任何 HTML 元素上，而不僅僅是 AMP 元素。placeholder 屬性表示標記有此屬性的元素充當父 AMP 元素的預留位置。如果指定，預留位置元素必須是 AMP 元素的直接子元素。預設情況下，即使 AMP 元素的資源尚未下載或初始化，也會立即顯示 AMP 元素的預留位置。準備就緒後，AMP 元素通常會隱藏其預留位置並顯示內容。關於預留位置的確切行為取決於元素的實作方式。

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
  <amp-img placeholder src="preview.png" layout="fill"></amp-img>
</amp-anim>

fallback

fallback 屬性可以設定在任何 HTML 元素上，而不僅僅是 AMP 元素。後備內容是一種慣例，可讓元素告知讀者瀏覽器不支援該元素。如果指定，後備內容元素必須是 AMP 元素的直接子元素。關於後備內容的確切行為取決於元素的實作方式。

<amp-anim src="animated.gif" width="466" height="355" layout="responsive">
  <div fallback>Cannot play animated images on this device.</div>
</amp-anim>

noloading

noloading 屬性表示是否應關閉此元素的「載入指示器」。許多 AMP 元素都已加入允許清單以顯示「載入指示器」，這是一個基本動畫，顯示元素尚未完全載入。元素可以透過新增此屬性來選擇退出此行為。

(重點摘要) 版面配置需求與行為摘要

下表說明了 layout 屬性可接受的參數、CSS 類別和樣式。請注意

1. 任何標記為 -amp- 字首的 CSS 類別以及標記為 i-amp- 字首的元素都被視為 AMP 的內部項目，並且不允許在使用者樣式表中使用。它們在此處顯示僅供參考。
2. 即使 width 和 height 在表格中指定為必要項目，預設規則也可能適用，就像 amp-pixel 和 amp-audio 的情況一樣。