amp-layout

Description

The amp-layout` component allows you to apply aspect-ratio based responsive layouts to any element. The `amp-layout` component works similarly to the layout.

Supported Layouts

fill fixed fixed-height flex-item intrinsic nodisplay responsive container

说明	一个常规的多用途容器元素，可将 AMP 强大的布局功能运用到任何元素上。
支持的布局	container、fill、fixed、fixed-height、flex-item、intrinsic、responsive

概述

借助 amp-layout 组件，您可以将基于宽高比的自适应布局应用于任何元素。amp-layout 组件与现有 AMP 组件的 layout 属性的工作原理相似，但前者支持用作子级的所有 HTML 标记。其他支持的布局均使用 amp-layout（例如 fixed-height、fixed 等）。

示例

此示例使用 amp-layout 在用内嵌 SVG 绘制的圆周围创建了一个自适应容器。

<amp-layout layout="responsive" width="1" height="1">
  <svg viewBox="0 0 100 100">
    <circle cx="50%" cy="50%" r="40%" stroke="black" stroke-width="3" />
      抱歉，您的浏览器不支持内嵌 SVG。
    </svg>
  </amp-layout>

属性

此元素包含扩展到 AMP 组件的常见属性。

验证

请参阅 AMP 验证工具规范中的 amp-layout 规则。

需要更多帮助？

您已多次阅读本文档，但它仍未能涵盖您的所有问题？也许其他人也这么觉得：在 Stack Overflow 上与他们联系。

前往 Stack Overflow

发现错误或缺少功能？

AMP 项目强烈鼓励您参与并做出贡献！我们希望您能成为我们开放源代码社区的持续参与者，但我们也欢迎您对所热衷问题做出一次性贡献。

前往 GitHub