Consultas de mídia e layout

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:

Veja demonstrações ao vivo lado a lado de amp-img: Demonstrações ao vivo no site AMP By Example.

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 `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.

Acesse a página Demonstração de layouts AMP para ver como diferentes layouts respondem ao redimensionamento de tela.

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.

Saiba mais sobre como controlar o layout aplicando consultas de mídia em Usar consultas de mídia CSS para gerar responsividade.

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="527"
    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="466"
    height="193"
    layout="responsive">
</amp-img>

Written by @Meggin
with contributions from @pbakaus