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 屬性的支援值
| 值 | 行為與需求 |
|---|---|
| 未顯示 | 如果未指定值，則會按如下方式推斷元件的版面配置
|
container | 元素讓其子元素定義其大小，非常像一般的 HTML div。元件假設本身沒有特定的版面配置，而僅充當容器；其子元素會立即轉譯。 |
fill | 元素會佔用可用的空間 (寬度和高度)。換句話說，fill 元素的版面配置和大小與其父項相符。若要讓元素填滿其父容器，請指定「fill」版面配置，並確保父容器指定 position:relative 或 position:absolute。 |
fixed | 元素具有固定的寬度和高度，且不支援回應式。width 和 height 屬性必須存在。唯一的例外是 amp-pixel 和 amp-audio 元件。 |
fixed-height | 元素會佔用可用的空間，但保持高度不變。此版面配置適用於水平定位內容的元素，例如 amp-carousel。height 屬性必須存在。width 屬性不得存在或必須等於 auto。 |
flex-item | 當父項是彈性容器 (即 display: flex) 時，元素及其父項中版面配置類型為 flex-item 的其他元素會佔用父容器的剩餘空間。width 和 height 屬性不是必需的。 |
intrinsic | 元素會佔用可用的空間，並根據 width 和 height 屬性給定的外觀比例自動調整其高度，直到達到傳遞至 amp-img 的 `width` 和 `height` 屬性所定義的元素大小，或達到 CSS 限制 (例如 `max-width`) 為止。寬度和高度屬性必須存在。此版面配置非常適用於大多數 AMP 元素，包括 amp-img、amp-carousel 等。可用空間取決於父元素，也可以使用 max-width CSS 進行自訂。此版面配置與 responsive 的不同之處在於具有內在高度和寬度。這在浮動元素內最為明顯，其中 responsive 版面配置會轉譯 0x0，而 intrinsic 版面配置會膨脹到其自然大小或任何 CSS 限制中較小的一個。 |
nodisplay | 元素不會顯示，並且在螢幕上佔用零空間，就像其顯示樣式為 none 一樣。此版面配置可以套用至每個 AMP 元素。假設元素可以在使用者動作時顯示自身 (例如，amp-lightbox)。width 和 height 屬性不是必需的。 |
responsive | 元素會佔用可用的空間，並根據 width 和 height 屬性給定的外觀比例自動調整其高度。此版面配置非常適用於大多數 AMP 元素，包括 amp-img、amp-video 等。可用空間取決於父元素，也可以使用 max-width CSS 進行自訂。width 和 height 屬性必須存在。注意：具有 |
sizes
所有支援 responsive 版面配置的 AMP 元素也都支援 sizes 屬性。此屬性的值是 sizes 運算式，如 img 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 屬性。此屬性的值是基於媒體運算式的尺寸運算式，與 img sizes 屬性 類似，但有兩個主要差異
- 它適用於元素的高度，而不是寬度。
- 允許百分比值，例如
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 元素。fallback 是一種慣例，可讓元素告知讀者瀏覽器不支援該元素。如果指定，則 fallback 元素必須是 AMP 元素的直接子元素。關於 fallback 的確切行為取決於元素的實作。
<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 類別和樣式。請注意
- 任何標記有字首
-amp-的 CSS 類別以及標記有字首i-amp-的元素都被視為 AMP 的內部元素，且不允許在使用者樣式表中使用。它們在此處顯示僅供參考。 - 即使在表格中將
width和height指定為必要，預設規則也可能適用，如amp-pixel和amp-audio的情況所示。
| 版面配置 | 寬度/ 高度是否為必要？ | 是否定義大小？ | 其他元素 | CSS "display" |
|---|---|---|---|---|
container | 否 | 否 | 否 | 區塊 |
fill | 否 | 是，父項的大小。 | 否 | 區塊 |
fixed | 是 | 是，由 width 和 height 指定。 | 否 | 內嵌區塊 |
fixed-height | 僅 height；width 可以是 auto | 是，由父容器和 height 指定。 | 否 | 區塊 |
flex-item | 否 | 否 | 是，基於父容器。 | 區塊 |
intrinsic | 是 | 是，基於父容器和 width:height 的外觀比例。 | 是，i-amphtml-sizer。 | block (行為類似於 取代元素) |
nodisplay | 否 | 否 | 否 | 無 |
responsive | 是 | 是，基於父容器和 width:height 的外觀比例。 | 是，i-amphtml-sizer。 | 區塊 |