AMP
EN
Deutsch Français العربية Español Italiano Indonesia 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

创建响应式 AMP 页面

简介

响应式网页设计是关于构建响应用户需求的流畅网页，这些网页适合用户的设备屏幕尺寸和方向。您可以在 AMP 中轻松实现这一点。AMP 支持所有屏幕和设备类别，并提供内置的响应式组件。

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

通过此视频了解 AMP 中的响应式设计。

控制视口

创建响应式布局

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

使每个元素 调整大小以适应屏幕可能很棘手。但是，在 AMP 中，您只需指定元素的 width 和 height 属性以及 "layout=responsive" 属性，即可轻松地使元素响应。当您将 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 px

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

继续阅读 – 要了解有关 AMP 中不同布局的更多信息，请参阅 布局和媒体查询 指南。

为什么当我可以轻松地使用 width=100% 样式使元素调整大小以适应屏幕时，使元素调整大小以适应屏幕却很棘手？

棘手之处在于让响应式元素在页面上呈现，而不会对性能指标或用户体验产生不利影响。是的，您可以轻松地使用“width=100%”使图像适应屏幕，但会影响性能。浏览器必须首先下载图像以获取图像的尺寸，然后根据屏幕尺寸适当调整图像大小，最后重排并重新绘制页面。在 AMP 中，渲染路径经过优化，以便首先布局页面，根据 amp-img 中提供的尺寸为图像预留占位符（使用这些数字来建立纵横比），然后下载资源，最后绘制页面。不需要重排。

为页面缩放媒体

响应式设计的最大挑战可能是正确地在页面上显示媒体，以便它响应屏幕的特性。在本节中，我们将了解如何在 AMP 页面上嵌入响应式视频和图像。

嵌入视频

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

示例：嵌入 YouTube 视频

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

 
<amp-youtube
  data-videoid="lBTCB7yLs8Y"
  layout="responsive"
  width="560"
  height="315"
>
</amp-youtube>
在游乐场中打开此代码段

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

显示自适应图像

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

为正确的分辨率提供清晰的图像

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

注意 – 基于 DPR (x) 的 srcset 选择器也可以使用；但是，为了获得更大的灵活性，我们建议使用 w 选择器。以前（在旧的 srcset 提议中），w 描述符描述视口宽度，但现在它描述图像源文件宽度，这允许用户代理计算每个图像的有效像素密度并选择要渲染的适当图像。

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

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

  • 对于视口宽度不超过 400 px，以视口宽度的 100% 渲染图像。
  • 对于视口宽度不超过 900 px 的情况，将图片渲染为视口宽度的 75%。
  • 对于超过 900 px 的情况，将图片渲染为 600 px 宽。
 
<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 px、DPR 为 2.6 的设备。根据以上代码，图片必须显示为视口宽度的 75%，因此浏览器会选择接近 803 px（412 _ .75 _ 2.6）的图片，恰好是 apple-800.jpg。

继续阅读 – 要详细了解在 AMP 中使用 srcset 和 sizes，请参阅 使用 srcset、sizes 和高度进行艺术指导 指南。

更改图片的艺术指导

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

示例：为不同的断点提供不同大小的图片

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

  • 大于或等于 670 px，显示 cat-large.jpg（650 x 340 px）
  • 在 470 - 669 px 之间，显示 cat-medium.jpg（450 x 340 px）
  • 小于或等于 469 px，显示 cat-small.jpg（226 x 340 px）

注意 – 由于我们希望图片为固定尺寸（即不倾斜），因此我们没有指定布局值，默认情况下，由于我们设置了宽度和高度，因此将设置为 layout=fixed。有关更多信息，请参阅 "如果未指定布局属性，会怎样？"。 

<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>
在游乐场中打开此代码段

继续阅读 – 要详细了解 AMP 中的艺术指导，请参阅 使用 srcset、sizes 和高度进行艺术指导 指南。

提供经过优化的图像

提供快速加载的页面需要经过优化的图像，包括大小、质量和格式。始终将文件大小减小到最低可接受的质量级别。您可以使用各种工具来“压缩”图像（例如，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 格式，并提供正确的分辨率（如果您没有进行此操作）。但是，并非所有平台都使用缓存，因此您仍应手动优化图片。

继续阅读 – 要详细了解 Google AMP 缓存应用的图片优化，请参阅 "Google AMP 缓存、AMP 精简版以及对速度的需求" 博客文章。

示例，为您提供灵感

以下是一些示例，我们希望它们能激发您创建响应式 AMP 页面

产品

由 AMP 制作