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