Overview
布局系统的主要目标是确保AMP元素能够表达它们的布局,以便运行时能够在任何远程资源(如JavaScript和数据调用)完成之前推断元素的大小。这是很重要的,因为这大大减少了渲染和滚动垃圾。
考虑到这一点,AMP布局系统旨在支持少数但灵活的布局,提供良好的性能保证。这个系统依赖于一组属性,如布局、宽度、高度、大小和高度来表示元素的布局和大小需求。
Behavior
一个非容器AMP元素(即layout != container)以未解析/未构建模式启动,在此模式下,除了一个占位符外,它的所有子元素都被隐藏(参见占位符属性)。完全构造元素所需的JavaScript和数据有效负载可能仍在下载和初始化中,但AMP运行时已经知道如何仅依靠CSS类和布局、宽度、高度和媒体属性来设置元素的大小和布局。在大多数情况下,如果指定了占位符,则会设置占位符的大小并将其定位为占用元素的所有空间。
当元素构建完成并完成第一个布局时,占位符将被隐藏。此时,元素需要正确地构建和定位它的所有子元素,并准备好显示和接受阅读器的输入。这是默认行为。每个元素都可以覆盖,例如,更快地隐藏占位符或保持它更长的时间。
元素的大小和显示基于布局,宽度,高度和媒体属性的运行时。所有的布局规则都是通过CSS内部实现的。如果元素的大小是可以通过CSS样式推断出来的,并且不会根据它的子元素而改变,则该元素被称为“定义大小”:可立即使用或动态插入。这并不意味着这个元素的大小不能改变。布局可以完全响应的情况下,响应,固定高度,填充和灵活项目布局。它仅仅意味着,如果没有明确的用户操作,例如在渲染、滚动或发布下载过程中,大小不会改变。
如果元素配置不正确,那么在PROD中根本不会呈现它,而在DEV模式下,运行时将以错误状态呈现元素。可能的错误包括无效或不支持的布局、宽度和高度属性值。
Layout Attributes
width
and height
根据布局属性的值,AMP组件元素必须具有包含整型像素值的宽度和高度属性。实际的布局行为由布局属性决定,如下所述。
在少数情况下,如果未指定宽度或高度,AMP 运行时可以按如下方式默认这些值:
amp-pixel:宽度和高度都默认为0。
amp-audio:默认的宽度和高度是从浏览器推断出来的。
layout
AMP 提供了一组布局,用于指定 AMP 组件在文档布局中的行为。您可以添加 layout
属性并为其指定下表中列出的其中一个值,从而为组件指定布局。
示例:简单的自适应图片,其中宽度和高度用于确定宽高比。
<amp-img
src="/img/amp.jpg"
width="1080"
height="610"
layout="responsive"
alt="an image"
> </amp-img>
>
本文参考翻译:https://amp.dev/zh_cn/documentation/guides-and-tutorials/learn/amp-html-layout/?format=websites