建立響應式 AMP 頁面

簡介

響應式網頁設計旨在建構流暢的網頁，以回應使用者的需求，使網頁能適應使用者裝置的螢幕尺寸和方向。您可以在 AMP 中輕鬆實現這一點。AMP 支援所有螢幕和裝置類別，並提供內建的響應式元件。

在本指南中，我們將向您展示如何在 AMP 中輕鬆實作這些響應式基礎知識

• 控制 viewport
• 建立響應式版面配置
• 縮放媒體

控制 viewport

為了最佳化您的網頁，使內容能縮放並適應任何裝置的瀏覽器視窗，您需要指定一個 meta viewport 元素。viewport 元素會指示瀏覽器如何縮放和調整網頁的可見區域 (viewport) 的大小。

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

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

這些是您在響應式網站上使用的典型 viewport 設定。雖然 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 的元素將佔據元素容器的完整寬度，而容器的寬度通常不受限制（即 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 頁面中，您可以使用具有寬度描述符 (w) 的 srcset 來為螢幕的像素密度提供正確的圖片。

範例：顯示符合螢幕的清晰圖片

在以下範例中，我們有幾個長寬比相同但解析度不同的圖片檔案。透過提供各種圖片解析度，瀏覽器可以選擇最適合裝置解析度的圖片。此外，我們還指定了要轉譯圖片的大小

• 對於寬度最大為 400 像素的 viewport，以 viewport 寬度的 100% 轉譯圖片。
• 對於寬度最大為 900 像素的 viewport，以 viewport 寬度的 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>

例如，假設我們有一個 viewport 寬度為 412 像素且 DPR 為 2.6 的裝置。根據上面的程式碼，圖片必須以 viewport 寬度的 75% 顯示，因此瀏覽器選擇了接近 803 像素 (412 _ .75 _ 2.6) 的圖片，恰好是 apple-800.jpg。

變更圖片的美術指導

美術指導是指針對特定斷點調整圖片的視覺特性。例如，您可能想要提供圖片的裁剪版本，以縮小圖片的焦點，而不是僅僅在螢幕變窄時縮放圖片，或者您可能想要在不同的斷點提供完全不同的圖片。在 HTML 中，您可以使用 picture 元素來完成此操作。在 AMP 中，可以使用 media 屬性來實現美術指導。

範例：不同斷點使用不同尺寸的圖片

在以下範例中，我們有 3 張不同的貓咪裁剪圖片，我們想要在不同的斷點顯示。因此，如果 viewport 寬度為

• 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 的假日禮品指南
• The Guardian

由 AMP 製作

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

• 作者： @bpaduch
  貢獻者： @pbakaus