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="an image">
</amp-img>

amp-img 元素会自动适应其容器元素的宽度,其高度会根据由指定宽度和高度确定的宽高比自动设定。您可以调整此浏览器窗口的大小,试一试这个功能:

layout 属性

使用 layout 属性,您能够按元素轻松控制元素在屏幕上的呈现方式。单独使用 CSS 也可实现这些目的,但难度更大,而且需要大量技巧。因此,请改用 layout 属性。

layout 属性支持的值

layout 属性中可使用以下值:

布局类型 是否要求指定宽度/高度 行为
nodisplay 元素不显示。该布局可应用于每个 AMP 元素。组件不占用任何屏幕空间,如同没有显示样式一般。假定元素能够在用户执行操作时自行显示,例如, amp-lightbox
fixed 元素有固定的宽度和高度,不支持任何自适应功能。其中,amp-pixel amp-audio 元素例外。
responsive 元素的宽度根据其容器元素的宽度进行调整,高度则根据由宽度和高度属性确定的宽高比自动重新调整。这种布局非常适合大多数 AMP 元素,包括 amp-img, amp-video。可用空间取决于父级元素,且可使用 max-width CSS 进行自定义。
fixed-height 仅高度 元素会占用为其提供的空间,但高度保持不变。这种布局非常适合 amp-carousel 等涉及水平放置内容的元素。 width 属性要么不指定,要么必须设为 auto
fill 元素会占用为其提供的空间(包括宽度和高度。换言之,填充元素的布局与其父级匹配。
container 元素会让其子级定义自己的尺寸,非常类似于普通 HTML div。假定组件自身没有特定布局,仅充当容器。其子级会立即呈现。
flex-item 如果父级是灵活容器(也就是说 display:flex,则元素和其父级内的其他元素会占用此父级容器的剩余空间。该元素尺寸由父级元素和父级元素内其他元素的数量确定(按照 display:flex CSS 布局。

如果未定义宽度和高度,会怎样?

在少数情况下,如果未指定 widthheight,AMP 运行时系统会将这些值默认如下:

  • amp-pixel:宽度和高度均默认为 0。
  • amp-audio:从浏览器推断出默认宽度和高度。

如果未指定 layout 属性,会怎样?

如果未指定 layout 属性,则 AMP 会尝试推断或猜测相应的值:

规则 推断的布局
height 已指定,而 width 未指定或设为 auto fixed-height
widthheight 属性已指定,且 sizes 属性也已指定 responsive
widthheight 属性已指定 fixed
widthheight 均未指定 container

使用媒体查询

CSS 媒体查询

使用 @media 来控制网页布局的外观和行为,就像在其他任何网站上一样。当浏览器窗口改变尺寸或屏幕方向时,媒体查询会重新接受评估,而元素则会根据新的结果隐藏和显示。

元素媒体查询

AMP 中另外一种用于自适应设计的功能是 media 属性。该属性可在所有 AMP 元素中使用;其工作方式类似于全局样式表中的媒体查询,但只影响单个网页中的特定元素。

举例来讲,我们有 2 张图片,这 2 张图片的媒体查询互斥。

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width=466
    height=355
    layout="responsive">
</amp-img>

根据屏幕宽度,系统会抓取并呈现其中一张图片。

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width=527
    height=193
    layout="responsive">
</amp-img>