AMP
EN
德語 法語 阿拉伯語 西班牙語 義大利語 印尼語 日語 韓語 葡萄牙語 俄語 土耳其語 中文 波蘭語 越南語

建立回應式 AMP 頁面

簡介

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

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

從此影片中了解 AMP 中的回應式設計。

控制可視區域 (viewport)

本節僅適用於 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 進行美術指導指南。

變更圖片的美術指導 (art direction)

美術指導是指為某些中斷點調整圖片的視覺特性。 例如，您可能不想僅僅隨著螢幕變窄而縮放圖片，而是提供圖片的裁剪版本，以縮小圖片的焦點，或者您可能希望在不同的中斷點提供完全不同的圖片。 在 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
使用巢狀圖片備援 (fallbacks)

在下面的範例中，如果瀏覽器支援 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 頁面的範例

正式環境 (Production)

由 AMP 製作