AMP

版面配置和媒體查詢

AMP 支援媒體查詢元素查詢,此外還提供強大的內建方式來控制個別元素的版面配置。與單獨使用 CSS 相比,layout 屬性能更輕鬆地處理和建立完整的回應式設計。

輕鬆製作回應式圖片

透過指定 widthheight,將版面配置設定為 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-pixelamp-audio 元素。
responsive (回應式) 元素大小會調整為容器元素的寬度,並根據寬度和高度屬性提供的長寬比自動調整其高度。此版面配置非常適用於大多數 AMP 元素,包括 amp-imgamp-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 (內在) 元素會佔用可用的空間,並根據 widthheight 屬性提供的長寬比自動調整其高度,直到達到元素的自然大小或達到 CSS 限制 (例如,max-width)。寬度和高度屬性必須存在。此版面配置非常適用於大多數 AMP 元素,包括 amp-imgamp-carousel 等。可用空間取決於父元素,也可以使用 max-width CSS 進行自訂。此版面配置與 responsive 的不同之處在於它具有內在高度和寬度。這在浮動元素內最為明顯,其中 responsive 版面配置會呈現 0x0,而 intrinsic 版面配置會膨脹到其自然大小或任何 CSS 限制中較小的一個。

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

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

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

  • amp-pixel:寬度和高度均預設為 0。
  • amp-audio:預設寬度和高度是從瀏覽器推斷的。

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

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

規則 推斷的版面配置
height 存在且 width 不存在或等於 auto fixed-height (固定高度)
widthheight 屬性與 sizes 屬性一起存在 responsive (回應式)
widthheight 屬性都存在 fixed (固定)
widthheight 都不存在 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>