AMP

amp-layout

DescriçãoUm elemento de contêiner genérico e multifuncional que permite adicionar os layouts avançados de AMP a qualquer elemento.
Layouts compatíveiscontainer, fill, fixed, fixed-height, flex-item, intrinsic, responsive

Visão geral

O componente amp-layout permite aplicar a qualquer elemento layouts responsivos com base na proporção. O componente amp-layout funciona de maneira semelhante ao atributo layout em componentes AMP existentes, mas aceita qualquer marcação HTML como filha. Todos os outros layouts compatíveis funcionam com amp-layout (por exemplo, fixed-height, fixed etc.).

Exemplo

Este exemplo usa o amp-layout para criar um contêiner responsivo em torno de um círculo desenhado com SVG in-line.

<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" />
      Sorry, your browser does not support inline SVG.
    </svg>
  </amp-layout>

Atributos

Este elemento inclui atributos comuns estendidos a componentes de AMP.

Validação

Consulte as regras de amp-layout (link em inglês) nas especificações do validador de AMP.

Precisa de mais ajuda?

You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.

Go to Stack Overflow
Found a bug or missing a feature?

The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.

Go to GitHub