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

创建响应式 AMP 页面

简介

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

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

从该视频中了解 AMP 中的响应式设计。

控制视口

本节仅对 AMP 网站、广告和故事有效。

创建响应式布局

在响应式设计中，您可以使用 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>
在 playground 中打开此代码段

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

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

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

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

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

缩放页面媒体

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

显示响应式图像

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

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

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

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

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

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

  • 对于最大 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>
在 playground 中打开此代码段

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

继续阅读 – 要了解有关在 AMP 中使用 srcset 和 sizes 的更多信息，请参阅使用 srcset、sizes 和 heights 的艺术方向指南。

更改图像的艺术方向

美术指导是指针对特定断点调整图像的视觉特性。例如，您可能不想仅仅在屏幕变窄时缩放图像，而是希望提供图像的裁剪版本，以缩小图像的焦点，或者您可能希望在不同的断点提供完全不同的图像。在 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 像素)

注意 – 由于我们希望图像是固定大小的（即，不倾斜），因此我们没有指定布局值，默认情况下，由于我们设置了宽度和高度，它将被设置为 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>
在 playground 中打开此代码段

继续阅读 – 要了解有关 AMP 中美术指导的更多信息，请参阅使用 srcset、sizes 和 heights 进行美术指导指南。

提供优化的图像

提供快速加载的页面需要优化的图像——在大小、质量和格式方面。始终将文件大小减小到可接受的最低质量级别。您可以使用各种工具来“压缩”图像（例如，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>
在 playground 中打开此代码段

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

继续阅读 – 要了解有关 Google AMP Cache 应用的图像优化的更多信息，请参阅“Google AMP Cache、AMP Lite 和对速度的需求”博客文章。

激发灵感的示例

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

生产

由 AMP 制作