创建自适应 AMP 页面

简介

自适应网页设计是关于构建可响应用户需求的流畅网页，这些网页可适应其设备的屏幕尺寸和方向。您可以在 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 的元素将占据元素容器的全部宽度，而该容器的宽度通常不受限制（即，宽度 = 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 _ .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 页面的灵感

制作

• 盖蒂图片社 “2016 年焦点”
• BRIT + CO 的节日礼物指南
• 《卫报》

由 AMP 打造

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

• 由 @bpaduch 撰写
  由 @pbakaus 贡献