版面配置和媒體查詢

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

輕鬆製作回應式圖片

透過指定 `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 元素。元件在螢幕上佔用零空間，如同其 display 樣式為 none 一樣。假設元素可以在使用者動作時顯示自身，例如 `amp-lightbox`。
`fixed (固定)`	是	元素具有固定的寬度和高度，且不支援回應式。唯一的例外是 `amp-pixel` 和 `amp-audio` 元素。
`responsive (回應式)`	是	元素調整大小以符合其容器元素的寬度，並自動調整其高度以符合由 width 和 height 屬性給定的長寬比。此版面配置非常適合大多數 AMP 元素，包括 `amp-img`、`amp-video`。可用空間取決於父元素，也可以使用 `max-width` CSS 進行自訂。注意：具有 `"layout=responsive"` 的元素沒有固有尺寸。元素的大小由其容器元素決定。為了確保您的 AMP 元素顯示，您必須為容器元素指定寬度和高度。請勿在容器元素上指定 `"display:table"`，因為這會覆寫 AMP 元素的顯示，導致 AMP 元素不可見。
`fixed-height (固定高度)`	僅限高度	元素佔用可用的空間，但保持高度不變。此版面配置適用於諸如 `amp-carousel` 等涉及水平定位內容的元素。`width` 屬性不得存在或必須等於 `auto`。
`fill (填滿)`	否	元素佔用可用的空間，包括寬度和高度。換句話說，fill 元素的版面配置與其父元素相符。為了使元素填滿其父容器，請確保父容器指定 `position:relative` 或 `position:absolute`。
`container (容器)`	否	元素讓其子元素定義其大小，非常像一般的 HTML `div`。元件被假定本身沒有特定的版面配置，而僅作為容器。其子元素會立即呈現。
`flex-item (彈性項目)`	否	當父元素是彈性容器 (即 `display:flex`) 時，元素及其父元素中的其他元素會佔用父容器的剩餘空間。元素大小由父元素和父元素內的其他元素數量根據 `display:flex` CSS 版面配置決定。
`intrinsic (固有)`	是	元素佔用可用的空間，並自動調整其高度以符合由 `width` 和 `height` 屬性給定的長寬比，直到達到元素的自然尺寸或達到 CSS 限制 (例如 max-width)。`width` 和 `height` 屬性必須存在。此版面配置非常適用於大多數 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