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 屬性。此屬性的值是一個尺寸表達式，如 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
可以在任何 HTML 元素（而不僅僅是 AMP 元素）上設定 placeholder 屬性。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
可以在任何 HTML 元素（而不僅僅是 AMP 元素）上設定 fallback 屬性。後備方案是一種慣例，允許元素向讀者傳達瀏覽器不支援該元素。如果指定，後備元素必須是 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 類別和樣式。請注意
- 任何標記為以
-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。 | 區塊 |