样式 & 布局

在 AMP HTML 页面上应用样式和布局与普通 HTML 页面非常相似——在这两种情况下，你都将使用 CSS。

出于性能和可用性考虑，AMP 限制了一些 CSS 样式，并将每个页面的总字节数限制为 75,000。但是，AMP 通过占位符和回退、通过 srcset 实现高级艺术指导以及layout 属性等功能扩展了响应式设计功能，以便更好地控制元素的显示方式。

提示 – 在 AMP 中使元素具有响应性非常容易。只需在它们上面放置 layout="responsive"。要了解有关 AMP 中响应式设计的更多信息，请访问创建响应式 AMP 页面。

向页面添加样式

每个 AMP 广告在文档 head 内的 <style amp-custom> 标签内都有 20,000 字节的 CSS 限制。在文档的 head 和内联中定义的样式都计入此限制。

在 head 中定义样式

在文档 head 内的 <style amp-custom> 标签中定义 CSS。每个 AMP 页面只允许有一个 <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 属性通过类或选择器设置 AMP 组件和 HTML 元素的样式

<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>

定义内联样式

AMP 允许内联样式

<body>
  <p style="color:pink;margin-left:30px;">Hello, Kitty.</p>
</body>

每个内联样式的实例都有 1,000 字节的限制。内联样式计入总共 20,000 字节的限制。

响应式布局元素

通过提供 width 和 height 属性指定所有可见 AMP 元素的大小和位置。这些属性表示元素的纵横比，然后可以随容器缩放。

将布局设置为响应式。这会将元素的大小调整为其容器元素的宽度，并根据 width 和 height 属性给出的纵横比自动调整其高度。

继续阅读 – 了解有关AMP 中支持的布局的更多信息

提供占位符和回退

对占位符和回退的内置支持意味着你的用户再也不用盯着空白屏幕了。

继续阅读 – 了解有关占位符和回退的更多信息

艺术性地处理你的图片

AMP 支持 srcset 和 sizes 属性，以便你对在何种情况下加载哪些图片进行细粒度控制。

继续阅读 – 了解有关使用 srcset 和 sizes 进行艺术指导的更多信息

验证你的样式和布局

使用 AMP 验证器来测试页面的 CSS 和布局值。

验证器会确认你页面的 CSS 不会超过 20,000 字节的限制，

检查不允许的样式，并确保页面布局受支持且格式正确。

另请参阅样式和布局错误的完整列表。

在控制台中，对于 CSS 超出字节数限制的页面，显示示例错误

继续阅读 – 了解如何验证和修复你的 AMP 页面

作者： @pbakaus
由 @Meggin 提供