布局和媒体查询

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 By Example 上的实时演示。

layout 属性

layout 属性使您可以轻松地控制每个元素在屏幕上的呈现方式。许多事情都可以使用纯 CSS 完成，但它们更难，并且需要大量技巧。请改用 layout 属性。

`layout` 属性支持的值

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

布局类型	宽度/ 需要高度	行为
`nodisplay`	否	不显示元素。此布局可以应用于每个 AMP 元素。该组件在屏幕上不占用空间，就像其 display 样式为 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`	否	元素占用可用的空间，包括宽度和高度。换句话说，fill 元素的布局与其父元素匹配。为了使元素填充其父容器，请确保父容器指定 `position:relative` 或 `position:absolute`。
`container`	否	元素使其子元素定义其大小，很像普通的 HTML `div`。假定该组件本身没有特定的布局，而仅充当容器。它的子元素会立即渲染。
`flex-item`	否	当父元素是弹性容器（即 `display:flex`）时，该元素及其父元素中的其他元素会占用父容器的剩余空间。元素大小由父元素和父元素内其他元素的数量根据 `display:flex` CSS 布局确定。
`intrinsic`	是	该元素占用可用的空间，并自动调整其高度以达到 `width` 和 `height` 属性给定的纵横比，直到达到元素的自然大小或达到 CSS 约束（例如，max-width）。必须存在宽度和高度属性。此布局非常适合大多数 AMP 元素，包括 `amp-img`、`amp-carousel` 等。可用空间取决于父元素，也可以使用 `max-width` CSS 进行自定义。此布局与具有固有高度和宽度的 `responsive` 不同。这在浮动元素内部最为明显，其中 `responsive` 布局将呈现 0x0，而 `intrinsic` 布局将膨胀到其自然大小或任何 CSS 约束的较小者。

提示 – 请访问演示 AMP 布局页面，以查看各种布局如何响应屏幕大小的调整。

如果宽度和高度未定义怎么办？

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

amp-pixel：宽度和高度均默认为 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 贡献