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`）。必须存在 width 和 height 属性。这种布局非常适用于大多数 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。 | 块 |