合格组件

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>

在游乐场中打开此代码片段

合格组件

你可以对以下组件应用响应式属性值