#BlackLivesMatter
Do you build things with AMP? Fill out the new AMP Developer Survey!
AMP

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.

说明 一个常规的多用途容器元素,可将 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
找到一个 bug 或者缺失某项功能?

AMP 项目强烈鼓励您参与其中并作出贡献!我们希望您能成为我们开源社区的持续参与者,但我们也欢迎您对热衷问题做出单次贡献。

前往 GitHub