布局和媒体查询

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="an image">
</amp-img>

amp-img 元素会自动适应其容器元素的宽度，并会根据由指定宽度和高度确定的宽高比自动调整自身的高度。您可通过调整此浏览器窗口的大小来试用一下该功能：

查看并排显示的 amp-img 在线演示：AMP By Example 上的在线演示。

layout 属性

通过 layout 属性，您能够按元素轻松控制元素在屏幕上的呈现方式。虽然其中的很多操作也可完全靠 CSS 来完成，但难度更大，而且需要大量技巧。因此，请改用 layout 属性。

`layout` 属性支持的值

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

布局类型	是否要指定宽度/高度	行为
`nodisplay`	否	元素不会显示。该布局可应用于每个 AMP 元素。相应组件不会占用任何屏幕空间，就如同未设置任何显示样式一般。该布局假设元素能够在用户操作时自行显示。例如 `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）。必须指定宽度和高度属性。这种布局非常适合大多数 AMP 元素，包括 `amp-img`、`amp-carousel` 等等。可用空间取决于父级元素，也可使用 `max-width` CSS 进行自定义。这种布局与 `responsive` 布局的不同之处在于：具有固有高度和宽度。这一差异在浮动元素中表现得最为明显：`responsive` 布局会呈现 0x0，而 `intrinsic` 布局会不断扩大直至达到其自然尺寸或任何 CSS 上限（取较小者）。

如果未定义宽度和高度，会怎样？

在少数情况下，如果未指定 width 或 height， AMP runtime 会将这些值默认如下：

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">
</amp-img>

系统会根据屏幕宽度抓取并呈现其中一张图片。

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

Written by @Meggin
with contributions from @pbakaus