A tecnologia AMP é compatível com consultas de mídia e consultas de elemento, além de ter um recurso integrado e eficiente para controlar o layout de elementos individuais. O atributo layout facilita muito o uso e a criação de design completamente responsivo em comparação com a aplicação somente de CSS.

Imagens responsivas simplificadas

Crie imagens responsivas especificando width e height, ajustando o layout para responsive e indicando com srcset qual recurso de imagem será usado conforme diferentes tamanhos de tela:

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="an image">
</amp-img>

Este amp-img se ajusta automaticamente à largura do próprio elemento contêiner, e sua altura é automaticamente definida para a proporção determinada pela largura e pela altura fornecidas. Faça um teste redimensionando esta janela do navegador:

O atributo layout

Com o atributo layout, é fácil controlar a forma que cada elemento será exibido na tela. Vários desses recursos podem ser usados com CSS puro. No entanto, isso é muito mais difícil e requer uma infinidade de gambiarras. Em vez disso, use o atributo layout.

Valores compatíveis com o atributo layout

Estes valores podem ser usados no atributo layout:

Tipo de layout Largura/
altura necessárias
Comportamento
nodisplay Não O elemento não é exibido. Pode ser aplicado a cada elemento de AMP. O componente não ocupa espaço na tela, como se o seu estilo de exibição fosse "none". A ação esperada é que o elemento seja exibido mediante ação do usuário, por exemplo, amp-lightbox.
fixed Sim O elemento tem largura e altura fixas sem compatibilidade com a responsividade. As únicas exceções são elementos amp-pixel e amp-audio.
responsive Sim O elemento é redimensionado para a largura do seu elemento contêiner e redimensiona sua altura automaticamente de acordo com a proporção determinada pelos atributos de largura e altura. Esse layout funciona bem para a maior parte dos elementos de AMP, incluindo amp-img e amp-video. O espaço disponível depende do elemento pai e também pode ser personalizado com o CSS max-width.

Observação: os elementos com "layout=responsive" não têm valor intrínseco. O tamanho do elemento é determinado a partir do elemento contêiner correspondente. Para garantir que o elemento de AMP seja exibido, você precisa especificar a altura e a largura do elemento contêiner. Não especifique "display:table" no elemento contêiner, porque isso modifica a exibição do elemento de AMP, que é renderizado invisível.

fixed-height Somente altura O elemento ocupa o espaço disponibilizado para ele, mas mantém a altura inalterada. Este layout funciona bem para elementos como amp-carousel, que envolvem conteúdo posicionado horizontalmente. O atributo width não pode estar presente ou precisa ser igual a auto.
fill Não O elemento ocupa o espaço disponibilizado para ele, tanto em largura quanto em altura. Em outras palavras, o layout de um elemento de preenchimento corresponde ao layout pai dele. Para que um elemento preencha o contêiner pai correspondente, o contêiner pai deve especificar `position:relative` ou `position:absolute`.
container Não O elemento permite que os filhos definam o próprio tamanho, como um div de HTML normal. Supõe-se que o componente não tem um layout próprio específico e atua apenas como um contêiner. Os filhos dele são renderizados imediatamente.
flex-item Não O elemento e outros elementos presentes no pai usam o espaço restante do contêiner pai quando ele é flexível (ou seja, display:flex). O tamanho do elemento é determinado pelo pai e pelo número de outros elementos dentro do pai de acordo com o layout de CSS de display:flex.
intrinsic Sim O elemento ocupa o espaço disponível para ele e redimensiona a própria altura automaticamente conforme a proporção determinada pelos atributos width e height até atingir o tamanho natural do elemento ou uma restrição de CSS (por exemplo, max-width). Os atributos de altura e largura precisam estar presentes. Esse layout funciona bem com a maior parte dos elemento de AMP, incluindo amp-img, amp-carousel etc. O espaço disponível depende do elemento pai e pode ser personalizado com CSS de max-width. Esse layout é diferente de responsive porque tem largura e altura intrínsecas. Isso fica mais aparente dentro de um elemento flutuante em que o layout responsive renderizará 0 x 0 e um layout intrinsic aumentará para o menor tamanho natural ou qualquer restrição de CSS.

O que acontece se a largura e a altura não estiverem definidas?

Em alguns casos, se o atributo width ou height não estiver especificado, o ambiente de tempo de execução de AMP poderá usar o seguinte padrão para esses valores:

  • amp-pixel: o valor padrão da largura e da altura será 0.
  • amp-audio: o valor padrão da largura e da altura é inferido a partir do navegador.

E se o atributo layout não estiver definido?

Se o atributo layout não tiver sido especificado, a página AMP tentará inferir ou adivinhar o valor adequado:

Regra Layout inferido
height está presente, e width está ausente ou é igual a auto fixed-height
Os atributos width ou height estão presentes com o atributo sizes responsive
O atributo width ou height está presente fixed
width e height não estão presentes container

Como usar consultas de mídia

Consultas de mídia CSS

Use @media para controlar a aparência e o comportamento do layout da página, como em qualquer outro site. Quando o tamanho ou a orientação da janela do navegador mudar, as consultas de mídia serão avaliadas outra vez e os elementos serão ocultos e exibidos com base nos novos resultados.

Consultas de mídia do elemento

Outro recurso extra para a geração de um design responsivo disponibilizado na AMP é o atributo media. Esse atributo pode ser usado em cada elemento de AMP. Ele funciona de modo semelhante às consultas de mídia em sua folha de estilo global, mas impacta apenas esse determinado elemento em uma única página.

Por exemplo, aqui temos duas imagens com consultas de mídia que se excluem mutuamente.

<amp-img
    media="(min-width: 650px)"
    src="wide.jpg"
    width=466
    height=355
    layout="responsive">
</amp-img>

Dependendo da largura da tela, uma ou outra será buscada e processada.

<amp-img
    media="(max-width: 649px)"
    src="narrow.jpg"
    width=527
    height=193
    layout="responsive">
</amp-img>