创建响应式 AMP 页面

简介

响应式 Web 设计旨在构建可响应用户需求的流畅网页，这些页面可以适应其设备的屏幕大小和方向。 您可以在 AMP 中轻松实现此目的。 AMP 支持所有屏幕和设备类别，并提供内置的响应式组件。

在本指南中，我们将向您展示如何在 AMP 中轻松实现这些响应式基础知识

• 控制视口
• 创建响应式布局
• 缩放媒体

控制视口

要优化您的网页，使其内容可以缩放并适合任何设备的浏览器窗口，您需要指定一个 meta 视口元素。 视口元素指示浏览器如何缩放和调整网页可见区域（视口）的大小。

但是，您应该使用什么值？ 好吧，在 AMP 中，这已经为您明确说明了。 作为 AMP 页面所需标记的一部分，您需要指定以下视口

<meta name="viewport" content="width=device-width" />

这些是您通常用于响应式站点的典型视口设置。 尽管 initial-scale=1 不是有效 AMP 页面所必需的，但建议使用它，因为它会在页面首次加载时将缩放级别设置为 1。

创建响应式布局

在响应式设计中，您可以使用 CSS @media 查询来调整网页的样式，以适应各种屏幕尺寸，而无需更改页面的内容。 在 AMP 中，您可以继续使用相同的 CSS @media 查询。 此外，为了更好地控制 AMP 元素，您可以在元素上指定 media 属性。 当您需要根据媒体查询显示或隐藏元素时，这尤其有用。 有关使用 media 属性的示例，请参见更改图像的艺术方向部分。

使每个元素调整大小以适合屏幕可能会很棘手。 但是，在 AMP 中，您只需指定 "layout=responsive" 属性以及元素的 width 和 height 属性，就可以轻松地使元素具有响应性。 将 responsive 布局应用于元素后，该元素将自动调整大小以适应其容器元素的宽度，并且高度将根据元素 width 和 height 指定的宽高比进行更改。 几乎所有 AMP 元素都支持 responsive 布局；请参阅元素的参考文档以查看支持哪些布局。

即使您可以使用 "layout=responsive" 轻松地使元素具有响应性，您仍然必须考虑元素在所有屏幕尺寸（包括桌面和平板电脑）上的外观。 一个常见的错误是允许图像占据屏幕的全部宽度，这会将图像拉伸超出其预期大小，从而导致宽屏用户体验不佳。 默认情况下，具有 layout=responsive 的元素将占据元素容器的全部宽度，该宽度通常不受限制（即，width=100%）。 您可以通过简单地限制图像容器的宽度来改善图像的显示效果。 例如，通过在“body”或“main”上设置“max-width”规则，您可以将所有图像限制为特定的最大宽度。

示例：限制响应式图像的宽度

在以下示例中，我们有一个鲜花图像（640 x 427 像素），我们希望在所有屏幕尺寸上显示它，因此我们指定了 width 和 height，并将布局设置为 responsive。

<div class="resp-img">
  <amp-img
    alt="flowers"
    src="/static/inline-examples/images/flowers.jpg"
    layout="responsive"
    width="640"
    height="427"
  ></amp-img>
</div>

但是，我们不希望图像超出其预期大小，因此我们通过自定义 CSS 将容器的 max-width 设置为 700 像素

<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

缩放页面媒体

响应式设计中最具挑战性的方面可能是在页面上正确显示媒体，使其响应屏幕的特性。 在本节中，我们将研究如何在 AMP 页面上嵌入响应式媒体。

嵌入视频

当您在网页中包含视频时，您需要确保用户可以看到视频的内容和视频的控件（即，没有溢出）。 通常，您将通过 CSS 媒体查询、容器和其他 CSS 的组合来实现此目的。 在 AMP 中，您只需将视频元素添加到页面，并在元素上指定 layout=responsive 即可，无需额外的 CSS。

示例：嵌入 YouTube 视频

在以下示例中，我们希望显示一个嵌入式 YouTube 视频，该视频可以响应设备屏幕的大小和方向。 通过将 "layout=responsive" 添加到 amp-youtube 元素，视频将调整大小以适合窗口，并且其宽高比将根据指定的 width 和 height 进行维护。

<amp-youtube
  data-videoid="lBTCB7yLs8Y"
  layout="responsive"
  width="560"
  height="315"
>
</amp-youtube>

您可以将多种类型的视频添加到您的 AMP 页面。 有关详细信息，请参阅可用的媒体组件列表。

显示响应式图像

图像构成了网页的很大一部分（大约占页面字节数的 65%）。 至少，您的图像应在各种屏幕尺寸和方向上可见（即，用户不必滚动、捏合/缩放即可查看整个图像）。 这可以通过 AMP 中的 "layout=responsive" 属性轻松完成（请参阅在 AMP 中包含图像）。 除了基本响应式图像外，您可能还希望提供多个图像资源以

• 为正确的像素密度提供清晰的图像
• 更改图像的艺术方向
• 提供优化的图像格式

为正确的像素密度提供清晰的图像

对于高分辨率屏幕（例如，Retina 显示屏），您应该提供看起来清晰锐利的图像；但是，您不想在低分辨率设备上使用同一图像，因为这会导致不必要的额外加载时间。 在非 AMP 和 AMP 页面中，您可以通过使用带有宽度描述符（ w ）的 srcset 来为屏幕的像素密度提供正确的图像。

示例：显示适合屏幕的清晰图像

在以下示例中，我们有几个纵横比相同但分辨率不同的图像文件。 通过提供各种图像分辨率，浏览器可以选择最适合设备分辨率的图像。 此外，我们还指定了渲染图像的大小

• 对于最大宽度为 400 像素的视口，以视口宽度的 100% 渲染图像。
• 对于最大宽度为 900 像素的视口，以视口宽度的 75% 渲染图像。
• 对于 900 像素以上的所有内容，以 600 像素宽度渲染图像。

<amp-img
  alt="apple"
  src="/static/inline-examples/images/apple.jpg"
  height="596"
  width="900"
  srcset="/static/inline-examples/images/apple-900.jpg 900w,
            /static/inline-examples/images/apple-800.jpg 800w,
            /static/inline-examples/images/apple-700.jpg 700w,
            /static/inline-examples/images/apple-600.jpg 600w,
            /static/inline-examples/images/apple-500.jpg 500w,
            /static/inline-examples/images/apple-400.jpg 400w"
  sizes="(max-width: 400px) 100vw,
            (max-width: 900px) 75vw, 600px"
>
</amp-img>

例如，假设我们有一个设备的视口宽度为 412 像素，DPR 为 2.6。根据上面的代码，图像必须以视口宽度的 75% 显示，因此浏览器会选择接近 803 像素 (412 * 0.75 * 2.6) 的图像，恰好是 apple-800.jpg。

更改图像的艺术指导

艺术指导是指针对特定断点调整图像的视觉特征。例如，您可能希望在屏幕变窄时，不只是缩放图像，而是提供图像的裁剪版本，以缩小图像的焦点，或者在不同的断点提供完全不同的图像。在 HTML 中，您可以使用 picture 元素来实现这一点。在 AMP 中，可以使用 media 属性来实现艺术指导。

示例：不同断点使用不同尺寸的图像

在以下示例中，我们有 3 张不同的猫的裁剪图像，我们希望在不同的断点显示它们。因此，如果视口宽度为

• 670 像素或更大，显示 cat-large.jpg (650 x 340 像素)
• 470 - 669 像素，显示 cat-medium.jpg (450 x 340 像素)
• 469 像素或更小，显示 cat-small.jpg (226 x 340 像素)

<amp-img
  alt="grey cat"
  media="(min-width: 670px)"
  width="650"
  height="340"
  src="/static/inline-examples/images/cat-large.jpg"
></amp-img>
<amp-img
  alt="grey cat"
  media="(min-width: 470px) and (max-width: 669px)"
  width="450"
  height="340"
  src="/static/inline-examples/images/cat-medium.jpg"
></amp-img>
<amp-img
  alt="grey cat"
  media="(max-width: 469px)"
  width="226"
  height="340"
  src="/static/inline-examples/images/cat-small.jpg"
></amp-img>

提供优化的图像

提供快速加载的页面需要优化图像——在大小、质量和格式方面。始终将文件大小减小到可接受的最低质量级别。您可以使用各种工具来“压缩”图像（例如，ImageAlph 或 TinyPNG）。在图像格式方面，一些图像格式提供了比其他格式更好的压缩能力（例如，WebP 和 JPEG XR 与 JPEG）。您需要为用户提供最优化图像，并确保用户的浏览器支持该图像（即，并非所有浏览器都支持所有图像格式）。

在 HTML 中，您可以使用 picture 标签提供不同的图像格式。在 AMP 中，虽然不支持 picture 标签，但您可以使用 fallback 属性提供不同的图像。

在 AMP 中，有两种方法可以实现提供优化的图像：服务器端和客户端。

配置服务器以发送最合适的图像格式

使用未广泛支持的图像格式（例如 WebP）的开发人员可以配置其服务器来处理浏览器 Accept 标头，并使用图像字节和适当的 Content-Type 标头进行响应。这可以防止浏览器下载不支持的图像类型。阅读有关内容协商的更多信息。

Accept: image/webp,image/apng,image/_,_/\*;q=0.8

使用嵌套图像回退

在以下示例中，如果浏览器支持 WebP，则提供 mountains.webp，否则提供 mountains.jpg。

<amp-img
  alt="Mountains"
  width="550"
  height="368"
  layout="responsive"
  src="/static/inline-examples/images/mountains.webp"
>
  <amp-img
    alt="Mountains"
    fallback
    width="550"
    height="368"
    layout="responsive"
    src="/static/inline-examples/images/mountains.jpg"
  ></amp-img>
</amp-img>

作为一项不错的奖励，一些缓存（例如 Google AMP 缓存）会自动压缩图像并将其转换为 WebP 和正确的分辨率（如果您没有这样做）。但是，并非所有平台都使用缓存，因此您仍然应该在您的终端手动优化图像。

激励您的示例

这里有一些示例，我们希望它们能激发您创建响应式 AMP 页面

生产

• Getty Images “2016 in Focus”
• BRIT + CO 的节日礼物指南
• 《卫报》

由 AMP 制作

• 示例
• 模板
• AMP Conf Workshop Codelab：制作精美的 AMP

• 作者： @bpaduch
  贡献者： @pbakaus