AMP HTML 网页的样式和布局与普通的 HTML 网页非常类似,均采用 CSS。

不过,出于性能和易用性方面的考虑,AMP 限制在某些情况下使用 CSS,但扩展了一些自适应设计功能(例如 占位符和备用行为通过 srcset 实现的高级艺术指导以及 layout 属性 等功能),以更好地控制您元素的显示方式。

Watch UpperQuad talk about the AMPproject site redesign, including the challenges of using AMP for the first time.

向网页添加样式

将所有 CSS 添加到文档标头中的 <style amp-custom> 标记中。例如:

<!doctype html>
<head>
...
<style amp-custom>
/* any custom styles go here. */
body {
background-color: white;
}
amp-img {
border: 5px solid black;
}

amp-img.grey-placeholder {
background-color: grey;
}
</style>
...
</head>

借助常见 CSS 属性,使用类或元素选择器来定义组件样式。例如:

<body>
<p>Hello, Kitty.</p>
<amp-img
class="grey-placeholder"
src="https://placekitten.com/g/500/300"
srcset="/img/cat.jpg 640w,
/img/kitten.jpg 320w"
width="500"
height="300"
layout="responsive">
</amp-img>
</body>

将布局样式设为自适应

通过提供 widthheight 属性,为所有可见的 AMP 元素指定尺寸和位置。这两种属性暗含元素的宽高比,相应元素可根据容器尺寸进行调整。

将布局设置为自适应。这样一来,元素的宽度将根据其容器元素的宽度来设定,高度则根据由宽度和高度属性确定的宽高比自动重新调整。

提供占位符和备用行为

AMP 内置了对占位符和备用行为的支持,您的用户再也不用呆呆看着空白的屏幕了。

对图片进行艺术指导

AMP 支持 srcsetsizes 属性,以便您能够更加精确地控制要在哪种情景下加载哪些图片。

验证样式和布局

使用 AMP 验证工具测试您网页的 CSS 和布局值。

验证工具将确认您网页的 CSS 是否超过 50000 字节的限制,检查网页是否使用了禁止的样式,并检查网页是否采用了受支持的布局且格式是否正确无误。另请参阅完整的样式和布局错误 列表。

下方是 Search Console 中的一个错误示例,网页的 CSS 超出 50000 字节的限制: