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.

Descrição Um elemento de contêiner genérico e multifuncional que permite adicionar os layouts avançados de AMP a qualquer elemento.
Layouts compatíveis container, 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?

Você já leu este documento várias vezes, mas ainda ficou com dúvidas sem respostas? Talvez outras pessoas pensem da mesma forma. Procure entrar em contato com elas no Stack Overflow.

Ir para o Stack Overflow
Encontrou um bug ou sente falta de um recurso?

O projeto AMP incentiva fortemente sua participação e contribuições! Esperamos que você se torne um participante assíduo de nossa comunidade de código aberto, mas também agradecemos contribuições pontuais para problemas que você tenha particular interesse.

Ir para o GitHub