AMP
繁體中文
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 简体中文 Polski Tiếng việt

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 屬性的支援值

值 行為和需求
未提供 如果未指定值，則元件的版面配置會推斷如下
  • 如果存在 height 且 width 缺失或設定為 auto，則假設為 fixed-height 版面配置。
  • 如果 width 和 height 都存在，且同時具有 sizes 或 heights 屬性，則假設為 responsive 版面配置。
  • 如果 width 和 height 都存在，則假設為 fixed 版面配置。
  • 如果 width 和 height 都缺失，則假設為 container 版面配置。
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 屬性必須存在。

注意：具有 "layout=responsive" 的元素沒有內在大小。元素的大小由其容器元素決定。為了確保您的 AMP 元素顯示，您必須為容器元素指定寬度和高度。請勿在容器元素上指定 "display:table"，因為這會覆寫 AMP 元素的顯示，使 AMP 元素不可見。

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 屬性，但有兩個主要差異

  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 的情況。
版面配置 寬度/
高度是否為必要項目？		 是否定義大小？ 其他元素 CSS "display"
container 否 否 否 block
fill 否 是，父項的大小。 否 block
fixed 是 是，由 width 和 height 指定。 否 inline-block
fixed-height 僅 height；width 可以是 auto 是，由父容器和 height 指定。 否 block
flex-item 否 否 是，基於父容器。 block
intrinsic 是 是，基於父容器和 width:height 的外觀比例。 是，i-amphtml-sizer。 block (行為類似於 replaced element)
nodisplay 否 否 否 none
responsive 是 是，基於父容器和 width:height 的外觀比例。 是，i-amphtml-sizer。 block