布局和媒体查询

AMP 同时支持媒体查询和元素查询，此外还提供了一种功能强大的内置方式来控制各个元素的布局。layout 属性让使用 CSS 单独工作时更轻松地处理和创建完全响应式设计。

响应式图片，轻松实现

通过指定 width 和 height、将布局设为 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 属性可让您轻松地逐个元素控制元素在屏幕上的呈现方式。许多这些操作都可以通过纯 CSS 实现，但难度更大，并且需要大量技巧。请改用 layout 属性。

`layout` 属性支持的值

layout 属性中可以使用以下值

布局类型	宽度/ 高度要求	行为
`nodisplay`	否	不显示元素。此布局可以应用于每个 AMP 元素。该组件在屏幕上不占用任何空间，就像其显示样式为 none 一样。假设元素可以在用户操作时显示自身，例如，`amp-lightbox`。
`fixed`	是	元素具有固定宽度和高度，不支持响应性。唯一的例外是 `amp-pixel` 和 `amp-audio` 元素。
`responsive`	是	元素的大小调整为其容器元素的宽度，并根据 width 和 height 属性给出的纵横比自动调整其高度。此布局非常适用于大多数 AMP 元素，包括 `amp-img`、`amp-video`。可用空间取决于父元素，还可以使用 `max-width` CSS 进行自定义。注意：具有 `"layout=responsive"` 的元素没有固有大小。元素的大小由其容器元素确定。为确保您的 AMP 元素显示，您必须为容器元素指定宽度和高度。请勿在容器元素上指定 `"display:table"`，因为这会覆盖 AMP 元素的显示，从而使 AMP 元素不可见。
`固定高度`	仅高度	元素占用其可用空间，但保持高度不变。此布局非常适合包含水平定位内容的元素，例如 `amp-carousel`。`width` 属性不得存在或必须等于 `auto`。
`填充`	否	元素占用其可用空间，包括宽度和高度。换句话说，填充元素的布局与其父元素匹配。要使元素填充其父容器，请确保父容器指定 `position:relative` 或 `position:absolute`。
`容器`	否	元素允许其子元素定义其大小，就像普通的 HTML `div` 一样。该组件假定本身没有特定的布局，而仅充当容器。其子元素立即呈现。
`flex-item`	否	当父元素是灵活容器（即 `display:flex`）时，元素及其父元素中的其他元素占用父容器的剩余空间。元素大小由父元素和父元素内其他元素的数量根据 `display:flex` CSS 布局确定。
`内在`	是	元素占用其可用空间，并自动将其高度调整为 `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`	`固定高度`
存在 `width` 或 `height` 属性以及 `sizes` 属性	`responsive`
存在 `width` 和 `height` 属性	`fixed`
不存在 `width` 和 `height`	`容器`

使用媒体查询

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 提供帮助