版面配置和媒體查詢

AMP 支援 媒體查詢 和 元素查詢，並內建強大的方式來控制個別元素的 版面配置。layout 屬性讓處理和建立完全回應式設計比單獨使用 CSS 容易得多。

輕鬆建立回應式圖片

透過指定 width 和 height、將 layout 設定為 responsive，並使用 srcset 指出要根據不同的螢幕尺寸使用哪個圖片素材，來建立回應式圖片

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="...">
</amp-img>

這個 amp-img 元素會自動調整為容器元素的寬度，而其高度會自動設定為由給定的寬度和高度決定的長寬比。調整這個瀏覽器視窗的大小來試試看

提示 – 請參閱我們的 amp-img 並排即時示範：AMP By Example 上的即時示範。

layout 屬性

layout 屬性讓您可以輕鬆地針對每個元素控制元素在螢幕上的呈現方式。許多這些事情都可以用純 CSS 完成 – 但它們要困難得多，而且需要大量的 hack 技巧。請改用 layout 屬性。

`layout` 屬性支援的值

以下值可用於 layout 屬性

版面配置類型	寬度/ 高度要求	行為
`nodisplay`	否	元素未顯示。此版面配置可以應用於每個 AMP 元素。元件在螢幕上佔用零空間，就像其顯示樣式為 none 一樣。假設元素可以在使用者操作時顯示自身，例如 `amp-lightbox`。
`fixed (固定)`	是	元素具有固定的寬度和高度，不支援回應式。唯一的例外是 `amp-pixel` 和 `amp-audio` 元素。
`responsive (回應式)`	是	元素的大小調整為其容器元素的寬度，並根據寬度和高度屬性提供的長寬比自動調整其高度。此版面配置非常適用於大多數 AMP 元素，包括 `amp-img`、`amp-video`。可用空間取決於父元素，也可以使用 `max-width` CSS 進行自訂。注意：具有 `"layout=responsive"` 的元素沒有內在大小。元素的大小由其容器元素決定。為了確保您的 AMP 元素顯示，您必須為容器元素指定寬度和高度。請勿在容器元素上指定 `"display:table"`，因為這會覆寫 AMP 元素的顯示，導致 AMP 元素不可見。
`fixed-height (固定高度)`	僅高度	元素佔用可用的空間，但保持高度不變。此版面配置適用於諸如 `amp-carousel` 之類的元素，這些元素涉及水平定位的內容。`width` 屬性不得存在或必須等於 `auto`。
`fill (填滿)`	否	元素佔用可用的空間，包括寬度和高度。換句話說，填滿元素的版面配置與其父元素相符。為了使元素填滿其父容器，請確保父容器指定 `position:relative` 或 `position:absolute`。
`container (容器)`	否	元素讓其子元素定義其大小，很像普通的 HTML `div`。假設元件本身沒有特定的版面配置，而僅充當容器。其子元素會立即呈現。
`flex-item (彈性項目)`	否	當父元素是彈性容器（即 `display:flex`）時，元素及其父元素中的其他元素會佔用父容器的剩餘空間。元素大小由父元素和父元素內的其他元素數量根據 `display:flex` CSS 版面配置決定。
`intrinsic (內在)`	是	元素佔用可用的空間，並根據 `width` 和 `height` 屬性提供的長寬比自動調整其高度，直到達到元素的自然大小或達到 CSS 限制（例如 max-width）。寬度和高度屬性必須存在。此版面配置非常適用於大多數 AMP 元素，包括 `amp-img`、`amp-carousel` 等。可用空間取決於父元素，也可以使用 `max-width` CSS 進行自訂。此版面配置與 `responsive` 的不同之處在於它具有內在的高度和寬度。這在浮動元素內最為明顯，其中 `responsive` 版面配置將呈現 0x0，而 `intrinsic` 版面配置將膨脹到其自然大小或任何 CSS 限制中的較小者。

提示 – 請瀏覽 AMP 版面配置示範頁面，以查看各種版面配置如何回應螢幕大小調整。

如果未定義寬度和高度會怎麼樣？

在少數情況下，如果未指定 width 或 height，AMP 執行階段可以將這些值預設為以下值

amp-pixel：寬度和高度都預設為 0。
amp-audio：預設寬度和高度從瀏覽器推斷。

如果未指定 `layout` 屬性會怎麼樣？

如果未指定 layout 屬性，AMP 會嘗試推斷或猜測適當的值

規則	推斷的版面配置
`height` 存在，且 `width` 不存在或等於 `auto`	`fixed-height (固定高度)`
`width` 或 `height` 屬性與 `sizes` 屬性一起存在	`responsive (回應式)`
`width` 和 `height` 屬性都存在	`fixed (固定)`
`width` 和 `height` 都不存在	`container (容器)`

使用媒體查詢

CSS 媒體查詢

使用 @media 來控制頁面版面配置的外觀和行為，就像您在任何其他網站上所做的那樣。當瀏覽器視窗變更大小或方向時，會重新評估媒體查詢，並根據新的結果隱藏和顯示元素。

繼續閱讀 – 在使用 CSS 媒體查詢實現回應式設計中深入了解如何透過應用媒體查詢來控制版面配置。

元素媒體查詢

AMP 中可用於回應式設計的一個額外功能是 media 屬性。此屬性可用於每個 AMP 元素；它的運作方式與全域樣式表中的媒體查詢類似，但僅影響單個頁面上的特定元素。

例如，這裡我們有 2 個具有互斥媒體查詢的圖片。

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width="527"
    height="355"
    layout="responsive"
    alt="...">
</amp-img>

根據螢幕寬度，將擷取並呈現其中一個或另一個。

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width="466"
    height="193"
    layout="responsive"
    alt="...">
</amp-img>

作者： @Meggin
貢獻者： @pbakaus