版面配置與媒體查詢

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

輕鬆製作回應式圖片

透過指定 width 和 height，將版面配置設定為 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 元素。元件在螢幕上佔用零空間，彷彿其 display 樣式為 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