樣式與版面配置

在 AMP HTML 頁面上設定樣式和版面配置與在一般 HTML 頁面上非常相似，在這兩種情況下，您都會使用 CSS。

基於效能和可用性的考量，AMP 限制了某些 CSS 樣式，並將每頁的總位元組數限制為 75,000 位元組。然而，AMP 透過諸如預留位置和後備方案、透過 srcset 實現進階精細圖片控制，以及版面配置屬性等功能，擴展了響應式設計的能力，以便更好地控制元素的顯示方式。

提示 – 在 AMP 中使元素具有響應式非常容易。只需在元素上加入 layout="responsive" 即可。若要進一步瞭解 AMP 中的響應式設計，請前往「建立響應式 AMP 頁面」。

為頁面新增樣式

每個 AMP 廣告在文件 head 內的 <style amp-custom> 標籤中，CSS 限制為 20,000 位元組。在文件 head 和行內定義的樣式都計入此限制。

在 head 中定義樣式

在文件 head 內的 <style amp-custom> 標籤中定義 CSS。每個 AMP 頁面只允許一個 <style amp-custom> 標籤。

<!doctype html>
  <head>
    ...
    <style amp-custom>
      /* any custom styles go here. */
      body {
        background-color: white;
      }
      amp-img {
        border: 5px solid black;
      }

      amp-img.grey-placeholder {
        background-color: grey;
      }
    </style>
    ...
  </head>

使用常見的 CSS 屬性，透過類別或選取器設定 AMP 元件和 HTML 元素的樣式

<body>
  <p>Hello, Kitty.</p>
  <amp-img
    class="grey-placeholder"
    src="https://placekitten.com/g/500/300"
    srcset="/img/cat.jpg 640w,
           /img/kitten.jpg 320w"
    width="500"
    height="300"
    layout="responsive">
  </amp-img>
</body>

定義行內樣式

AMP 允許行內樣式

<body>
  <p style="color:pink;margin-left:30px;">Hello, Kitty.</p>
</body>

每個行內樣式實例的限制為 1,000 位元組。行內樣式計入總共 20,000 位元組的限制。

以響應式方式配置元素

透過提供 width 和 height 屬性，為所有可見的 AMP 元素指定大小和位置。這些屬性暗示了元素的長寬比，然後元素可以隨著容器縮放。

將版面配置設定為響應式。這會將元素的大小調整為其容器元素的寬度，並根據 width 和 height 屬性給定的長寬比自動調整其高度。

繼續閱讀 – 瞭解更多關於 AMP 中支援的版面配置

提供預留位置和後備方案

對預留位置和後備方案的內建支援意味著您的使用者再也不必盯著空白畫面了。

繼續閱讀 – 瞭解更多關於預留位置和後備方案

精細控制您的圖片呈現

AMP 同時支援 srcset 和 sizes 屬性，讓您能夠精細控制在何種情況下載入哪些圖片。

繼續閱讀 – 瞭解更多關於透過 srcset 和 sizes 實現精細圖片控制

驗證您的樣式和版面配置

使用 AMP 驗證工具來測試您頁面的 CSS 和版面配置值。

驗證工具會確認您頁面的 CSS 沒有超過 20,000 位元組的限制，

檢查不允許的樣式，並確保頁面的版面配置受到支援且格式正確。

另請參閱樣式和版面配置錯誤的完整清單。

CSS 超過位元組限制的頁面在主控台中的錯誤範例

繼續閱讀 – 瞭解更多關於如何驗證和修正您的 AMP 頁面

作者： @pbakaus
貢獻者： @Meggin