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

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