布局 & 媒体查询

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

轻松实现响应式图片

通过指定 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 属性

使用 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 约束（例如，最大宽度）。必须存在宽度和高度属性。此布局非常适合大多数 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 元素；它的工作方式类似于全局样式表中的媒体查询，但仅影响单个页面上的特定元素。

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

<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