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 属性的受支持值
| 值 | 行为和要求 |
|---|---|
| 不存在 | 如果未指定任何值，则按如下方式推断组件的布局
|
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 属性。注意： |
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 属性，但有两个关键区别：
- 它应用于元素的高度，而不是宽度。
- 允许使用百分比值，例如
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 属性
在以下示例中，我们有两个具有互斥媒体查询的图像。根据屏幕宽度，将获取并渲染两个图像中的一个。 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 类和样式。请注意
- 任何标记为带有
-amp-前缀的 CSS 类以及带有i-amp-前缀的元素都被认为是 AMP 的内部元素，并且不允许在用户样式表中使用。此处显示它们只是为了提供信息。 - 即使在表中将
width和height指定为必需，默认规则也可能适用，就像amp-pixel和amp-audio的情况一样。
| 布局 | 宽度/ 高度是否必需？ | 定义大小？ | 其他元素 | CSS "display" |
|---|---|---|---|---|
container | 否 | 否 | 否 | 块 |
fill | 否 | 是，父级的大小。 | 否 | 块 |
fixed | 是 | 是，由 width 和 height 指定。 | 否 | 内联块 |
fixed-height | 仅限 height；width 可以为 auto | 是，由父容器和 height 指定。 | 否 | 块 |
flex-item | 否 | 否 | 是，基于父容器。 | 块 |
intrinsic | 是 | 是，基于父容器和 width:height 的宽高比。 | 是，i-amphtml-sizer。 | block（行为类似于替换元素） |
nodisplay | 否 | 否 | 否 | 无 |
responsive | 是 | 是，基于父容器和 width:height 的宽高比。 | 是，i-amphtml-sizer。 | 块 |