布局和媒体查询

AMP 支持媒体查询和元素查询，并提供强大的内置方式来控制单个元素的布局。layout 属性使处理和创建完全响应式设计比单独使用 CSS 容易得多。

轻松实现响应式图片

通过指定 width 和 height，将 layout 设置为 responsive，并使用 srcset 指示基于不同屏幕尺寸要使用的图像资源，来创建响应式图像。

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="...">
</amp-img>

这个 amp-img 元素会自动适应其容器元素的宽度，并且其高度会自动设置为由给定宽度和高度确定的宽高比。通过调整此浏览器窗口的大小来试用一下

提示 – 请参阅我们在 amp-img 的并排实时演示：AMP 示例上的实时演示。

layout 属性

layout 属性让您可以轻松地控制元素在屏幕上的呈现方式。使用纯 CSS 可以实现许多这些效果，但是它们更难实现，并且需要大量技巧。请改用 layout 属性。

`layout` 属性支持的值

以下值可以在 layout 属性中使用

布局类型	宽度/ 所需高度	行为
`nodisplay`	否	元素未显示。此布局可以应用于每个 AMP 元素。该组件在屏幕上不占用任何空间，就像其显示样式为 none 一样。假设该元素可以在用户操作时显示自身，例如，`amp-lightbox`。
`fixed`	是	元素具有固定的宽度和高度，不支持响应式。唯一的例外是 `amp-pixel` 和 `amp-audio` 元素。
`responsive`	是	元素的大小设置为其容器元素的宽度，并自动调整其高度为宽度和高度属性给出的宽高比。此布局非常适合大多数 AMP 元素，包括 `amp-img`、`amp-video`。可用空间取决于父元素，也可以使用 `max-width` CSS 进行自定义。注意：具有 `"layout=responsive"` 的元素没有固有的大小。元素的大小由其容器元素确定。为了确保您的 AMP 元素显示，您必须为包含元素指定宽度和高度。请勿在包含元素上指定 `"display:table"`，因为这会覆盖 AMP 元素的显示，使 AMP 元素不可见。
`fixed-height`	仅高度	元素占用可用空间，但保持高度不变。此布局非常适合诸如 `amp-carousel` 之类的水平定位内容的元素。`width` 属性必须不存在或必须等于 `auto`。
`fill`	否	元素占用其可用的空间，包括宽度和高度。换句话说，填充元素的布局与其父级匹配。要使元素填充其父容器，请确保父容器指定 `position:relative` 或 `position:absolute`。
`container`	否	元素使其子元素定义其大小，很像普通的 HTML `div`。该组件被认为自身没有特定的布局，而只是充当容器。它的子元素会立即呈现。
`flex-item`	否	当父级是弹性容器（即 `display:flex`）时，元素及其父级中的其他元素会占用父容器的剩余空间。元素的大小由父元素和父级内部其他元素的数量根据 `display:flex` CSS 布局确定。
`intrinsic`	是	该元素占用其可用的空间，并自动调整其高度为 `width` 和 `height` 属性给出的宽高比，直到达到元素的自然大小或达到 CSS 约束（例如 max-width）。必须存在 width 和 height 属性。此布局非常适合大多数 AMP 元素，包括 `amp-img`、`amp-carousel` 等。可用空间取决于父元素，也可以使用 `max-width` CSS 进行自定义。此布局与 `responsive` 的不同之处在于它具有固有高度和宽度。这在浮动元素内最明显，其中 `responsive` 布局将呈现 0x0，而 `intrinsic` 布局将膨胀到其自然大小或任何 CSS 约束的较小值。

提示 – 访问演示 AMP 布局页面，了解各种布局如何响应屏幕大小调整。

如果 width 和 height 未定义怎么办？

在少数情况下，如果未指定 width 或 height，则 AMP 运行时可以将这些值默认为以下值

amp-pixel：width 和 height 均默认为 0。
amp-audio：默认的宽度和高度是从浏览器推断出来的。

如果未指定 `layout` 属性怎么办？

如果未指定 layout 属性，则 AMP 会尝试推断或猜测适当的值

规则	推断的布局
存在 `height` 并且 `width` 不存在或等于 `auto`	`fixed-height`
`width` 或 `height` 属性与 `sizes` 属性一起存在	`responsive`
`width` 和 `height` 属性都存在	`fixed`
`width` 和 `height` 都不存在	`container`

使用媒体查询

CSS 媒体查询

使用 @media 来控制页面布局的外观和行为，就像在任何其他网站上一样。当浏览器窗口更改大小或方向时，将重新评估媒体查询，并且会根据新的结果隐藏和显示元素。

继续阅读 – 在使用 CSS 媒体查询来实现响应式中了解有关通过应用媒体查询来控制布局的更多信息。

元素媒体查询

AMP 中可用的响应式设计的另一个特性是 media 属性。此属性可以在每个 AMP 元素上使用；它的工作方式类似于全局样式表中的媒体查询，但仅影响单个页面上的特定元素。

例如，这里我们有 2 个具有互斥媒体查询的图像。

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width="527"
    height="355"
    layout="responsive"
    alt="...">
</amp-img>

根据屏幕宽度，将获取并呈现其中一个或另一个。

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width="466"
    height="193"
    layout="responsive"
    alt="...">
</amp-img>

由 @Meggin 编写
由 @pbakaus 贡献