创建自适应 AMP 页面

简介

自适应 Web 设计是关于构建能够响应用户需求的流畅 Web 页面，即适合其设备屏幕尺寸和方向的页面。您可以在 AMP 中轻松实现此目的。AMP 支持所有屏幕和设备类别，并提供内置的自适应组件。

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

• 控制视口
• 创建自适应布局
• 缩放媒体

控制视口

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

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

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

这些是您用于自适应网站的典型视口设置。虽然 initial-scale=1 不是有效 AMP 页面所必需的，但建议使用，因为它在首次加载页面时将缩放级别设置为 1。

创建自适应布局

在自适应设计中，您可以使用 CSS @media 查询来调整 Web 页面的样式，以适应各种屏幕尺寸，而无需更改页面的内容。在 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 页面上嵌入自适应媒体。

嵌入视频

当您在 Web 页面中包含视频时，您需要确保用户可以看到视频的内容和视频的控件（即，没有溢出）。通常，您可以通过 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 页面添加多种类型的视频。有关详细信息，请参阅可用的媒体组件列表。

显示自适应图像

图像构成了 Web 页面的很大一部分（大约占页面字节数的 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 _ .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 贡献