合格的元件

AMP HTML 響應式屬性

重要事項：此文件不適用於您目前選取的格式 電子郵件！

您可以根據螢幕尺寸套用或移除特定屬性。這些是響應式屬性，或稱媒體屬性。在合格的元件上，這些屬性會根據媒體查詢套用或移除。您也可以使用不含任何媒體查詢的值。媒體查詢會從左到右評估，並套用第一個符合的媒體查詢。您必須包含不含媒體查詢的預設值。

響應式屬性不需要媒體查詢。您可以像使用一般屬性一樣套用符合媒體查詢條件的屬性：attr-name="attr-value"。

若要將此行為套用至屬性，請使用以下格式

<amp-component
  attr-name="(min-width: 1000px) valueOne, (min-width: 600px) valueTwo, defaultValue"
></amp-component>

在以上範例中，如果頁面的螢幕寬度為 1000px 或更大，則會套用 valueOne。如果寬度介於 999px 和 600px 之間，則會套用 valueTwo。當螢幕寬度為 599px 或更小時，則會套用 defaultValue。

以下 amp-base-carousel 將在寬度大於或等於 800px 時一次顯示 3 張幻燈片，否則顯示 2 張。

<amp-base-carousel
    width="900" height="200"
    layout="responsive"
    visible-count="(min-width: 800px) 3, 2">
  <amp-img src="./img/redgradient.png" layout="flex-item"></amp-img>
  <amp-img src="./img/greengradient.png" layout="flex-item"></amp-img>
  <amp-img src="./img/bluegradient.png" layout="flex-item"></amp-img>
  <amp-img src="./img/orangegradient.png" layout="flex-item"></amp-img>
  <amp-img src="./img/tealgradient.png" layout="flex-item"></amp-img>
  <amp-img src="./img/lemonyellowgradient.png" layout="flex-item"></amp-img>
  <amp-img src="./img/lilacgradient.png" layout="flex-item"></amp-img>
</amp-base-carousel>

在 Playground 中開啟此程式碼片段

合格的元件

您可以將響應式屬性值套用至以下元件