适用的组件

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 中打开此代码段

适用的组件

您可以将响应式属性值应用于以下组件