建立回應式 AMP 頁面

簡介

回應式網頁設計是關於建構可回應使用者需求的流暢網頁，也就是能配合使用者裝置螢幕尺寸和方向的頁面。在 AMP 中，您可以輕鬆達成此目標。AMP 支援所有螢幕和裝置類別，並提供內建的回應式元件。

在本指南中，我們將向您展示如何在 AMP 中輕鬆實作這些回應式基本概念

• 控制視口
• 建立回應式版面配置
• 縮放媒體

控制視口

若要最佳化您的網頁，讓內容能縮放並符合任何裝置的瀏覽器視窗，您需要指定 meta 視口元素。視口元素會指示瀏覽器如何縮放網頁的可見區域 (視口) 和調整其大小。

但是，您應該使用哪些值呢？在 AMP 中，這已為您明確說明。作為 AMP 頁面的必要標記一部分，您需要指定下列視口

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

這些是您通常會用於回應式網站的視口設定。雖然有效的 AMP 頁面不需要 initial-scale=1，但建議您使用，因為它會在頁面首次載入時將縮放層級設定為 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 頁面中，您可以透過將 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>

例如，假設我們有一個裝置的視口寬度為 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 年焦點」
• BRIT + CO 的假日禮品指南
• The Guardian

由 AMP 製作

• 範例
• 範本
• AMP Conf Workshop Codelab：製作精美的 AMP

• 作者 @bpaduch
  貢獻者 @pbakaus