用法
有效的子項
屬性
樣式設定
- 範本
- 預先範本化的 UI
  - 橫向一半一半 UI
  - 現代外觀比例
    - 前景
    - 背景

重要事項：本文件不適用於您目前選取的格式：網站！

amp-story-grid-layer

說明

AMP 故事單一頁面的單一層，可將內容定位於以格線為基礎的版面配置中。

必要指令碼

<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>

用法

<amp-story-grid-layer> 元件會將其子項配置到格線中。其導入是以 CSS 格線規格為基礎。

有效的子項

amp-story-grid-layer 可以包含下列任何元素

注意：此清單日後將會擴充。

區域	允許的標記
媒體	`<amp-audio>` `<amp-img>` `<amp-video>` `<source>` `<svg>` `<track>`
分析與評估	`<amp-experiment>` `<amp-pixel>`
分節	`<address>` `<article>` `<aside>` `<footer>` `<h1>-<h6>` `<header>` `<hgroup>` `<nav>` `<section>`
文字	`<abbr>` `<amp-fit-text>` `<amp-font>` `<amp-gist>` `<b>` `<bdi>` `<bdo>` `<blockquote>` `<br>` `<cite>` `<code>` `<data>` `<del>` `<dfn>` `<div>` `<em>` `<figcaption>` `<figure>` `<hr>` `<i>` `<ins>` `<kbd>` `<main>` `<mark>` `<p>` `<pre>` `<q>` `<rp>` `<rt>` `<rtc>` `<ruby>` `<s>` `<samp>` `<small>` `<span>` `<strong>` `<sub>` `<sup>` `<time>` `<u>` `<var>` `<wbr>`
清單	`<amp-list>` `<amp-live-list>` `<dd>` `<dl>` `<dt>` `<li>` `<ol>` `<ul>`
表格	`<caption>` `<col>` `<colgroup>` `<table>` `<tbody>` `<td>` `<tfoot>` `<th>` `<thead>` `<tr>`
連結	`<a>`
嵌入元件	`<amp-twitter>`
其他	`<amp-install-serviceworker>` `<noscript>`

屬性

template [必要]

template 屬性決定格線層的版面配置。可用的範本如下方「範本」一節所述。

grid-area [選填]

此屬性是在 <amp-story-grid-layer> 的子項上指定。grid-area 指定命名區域 (來自使用定義這些區域的 template)，其中應顯示包含此屬性的元素。

範例

<amp-story-grid-layer template="thirds">
  <p grid-area="middle-third">Element 1</p>
  <p grid-area="lower-third">Element 2</p>
  <p grid-area="upper-third">Element 3</p>
</amp-story-grid-layer>

aspect-ratio [選填]

此值會以「水平：垂直」格式指定外觀比例，其中「水平」和「垂直」都是整數。如果指定此屬性，格線層的版面配置會設定為符合指定的比例。在這種情況下，字型大小會自動設定為所得高度的 1/10，以啟用比例內容縮放。

範例

<amp-story-grid-layer aspect-ratio="9:16" template="vertical">
  <div style="width: 10%; height: 10%; font-size: 2em;">
    This block will be in 9:16 aspect ratio and font size will be set at the 20%
    of the layer's height.
  </div>
</amp-story-grid-layer>

preset [選填]

指定回應式預設設定，以使用外觀比例和縮放比例因數來設定圖層。

預設設定如下

2021-background：外觀比例圖層會放大以涵蓋信箱邊界。可能只包含背景素材 (圖片或影片)。
2021-foreground：外觀比例圖層，其中包含所有前景素材。

值如下

預設設定	外觀比例	縮放比例因數
2021-background	69:116	1.142
2021-foreground	69:116	1

這些預設設定針對 2021 年的行動螢幕進行最佳化。請密切注意新預設設定的推出，並追蹤 Web Stories 藍圖。

anchor [選填]

將外觀比例圖層 (包括預設設定) 對齊至指定的邊框或角落。當相對於邊框或角落定位元素時，請使用此屬性來維持跨圖層的縮放比例。選項：top、left、bottom、right、top-left、top-right、bottom-left、bottom-right。

樣式設定

範本

以下是可用於指定格線層版面配置的範本。

如要查看實際使用的版面配置範本，請參閱 AMP By Example 上的版面配置示範。

fill (填滿)

fill 範本會完整顯示其第一個子項。所有其他子項都不會顯示。

命名區域：(無)

範例

<amp-story-grid-layer template="fill">
  <amp-img src="cat.jpg" alt="..."></amp-img>
</amp-story-grid-layer>

vertical (垂直)

vertical 範本會沿著 y 軸配置其元素。根據預設，其元素會對齊頂端，而且可以沿著 x 軸佔據整個螢幕。

命名區域：(無)

<amp-story-grid-layer template="vertical">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
</amp-story-grid-layer>

horizontal (水平)

horizontal 範本會沿著 x 軸配置其元素。根據預設，其元素會對齊行首，而且可以沿著 y 軸佔據整個螢幕。

命名區域：(無)

<amp-story-grid-layer template="horizontal">
  <p>Element 1</p>
  <p>Element 2</p>
  <p>Element 3</p>
</amp-story-grid-layer>

thirds (三分)

thirds 範本會將螢幕分成三個大小相等的列，並讓您將內容置入每個區域。

命名區域

upper-third (上三分之一)
middle-third (中三分之一)
lower-third (下三分之一)

<amp-story-grid-layer template="thirds">
  <p grid-area="middle-third">Element 1</p>
  <p grid-area="lower-third">Element 2</p>
  <p grid-area="upper-third">Element 3</p>
</amp-story-grid-layer>

雖然這些範本可讓您以視覺化方式排列螢幕上的內容，但螢幕閱讀器/輔助技術仍會依內容在底層標記中出現的順序宣告內容。請確保文件標記中的內容順序符合邏輯，無論其視覺呈現方式為何。

預先範本化的 UI

橫向一半一半 UI

橫向一半一半預先範本化的 UI 會調整 <amp-story-grid-layer> 元素的大小，使其佔據螢幕的一半而非整個螢幕，並定位在檢視區的左半部或右半部。此屬性只會影響橫向檢視區，在直向檢視區中會遭到忽略。此範本可讓您更輕鬆地設計全螢幕橫向故事：將螢幕分成兩半，讓每一半在大多數裝置上都具有直向比例，以便重複使用已為直向故事建構的直向素材、設計和範本。

<amp-story-grid-layer> 元素上的 position 屬性接受兩個值：landscape-half-left 或 landscape-half-right。

您的故事需要啟用 supports-landscape 模式才能使用此範本。

範例

<amp-story-page id="foo">
  <amp-story-grid-layer template="fill" position="landscape-half-left">
    <amp-img src="cat.jpg" alt="..."></amp-img>
  </amp-story-grid-layer>
  <amp-story-grid-layer template="vertical" position="landscape-half-right">
    <h2>Cat ipsum dolor sit amet...</h2>
  </amp-story-grid-layer>
</amp-story-page>

現代外觀比例

格線層上的回應式預設設定可最大化前景元素可用的螢幕空間，並一致地縮放素材。

<amp-story-grid-layer preset="2021-background" template="fill">
    <amp-img src="cat.jpg" layout="fill" alt="...">
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground">
    <h1>This will stay consistent with the bg</h1>
</amp-story-grid-layer>
<amp-story-grid-layer preset="2021-foreground" anchor="bottom-left">
    <!-- Position the icon close to the corner on all screens -->
    <amp-img src="icon.jpg" alt="..." style="bottom: 1em; left: 1em">
</amp-story-grid-layer>

背景預設設定主要適用於設計同時包含背景和前景元素的版面配置。如果頁面只包含背景中的圖片或影片，請考慮針對該情境使用一般格線層。

前景

針對前景元素使用 2021-foreground 預設設定。此圖層將永遠完全可見，並水平或垂直擴充至邊界，在不裁切的情況下最大化尺寸。屬性 anchor 可用於將前景圖層釘選至頁面角落或邊框，以便元素可以相對於這些邊框或角落定位 (這對於標誌或註腳很有用)。

背景

針對背景圖層使用 2021-background 預設設定。此預設設定會使用背景素材涵蓋大多數手機上的整個螢幕。它在不加上信箱邊框的情況下執行此操作，並使定位與前景元素保持一致。雖然此技術提供最一致的使用者體驗，但可能會裁切背景最多 7% 的一個或所有邊框。設計和挑選素材時請記住這一點。

此預設設定可能會在不具備傳統手機螢幕尺寸 (例如平板電腦或摺疊式手機) 的裝置上顯示信箱邊框。您可以變更頁面的背景顏色，以符合背景，達到最佳視覺效果。

需要更多協助嗎？

您已閱讀本文件十幾次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有相同的感受：在 Stack Overflow 上與他們聯繫。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別熱衷的問題提供一次性的貢獻。

前往 GitHub