布局 & 媒体查询

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 元素；它的工作方式类似于全局样式表中的媒体查询，但仅影响单个页面上的特定元素。

例如，这里我们有 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 贡献