用法
有效的子項
屬性
樣式
- 範本
  - fill
  - vertical
  - horizontal
  - thirds
- 預先範本化的 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 Grid Spec。

有效的子項

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 年的行動裝置螢幕進行了最佳化。隨著技術的發展，請留意新的預設，並遵循網頁故事藍圖。

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