A AMP é compatível comconsultas de mídia econsultas de elementos e também conta com um modo avançado e integrado de controlar olayout de elementos individuais. O atributo layout facilita muito o uso e a criação de design totalmente responsivo em comparação com o uso de somente CSS.

Imagens responsivas mais fáceis

Crie imagens responsivas especificando width e height, definindo o layout para responsive e indicando com srcset qual recurso de imagem usar com base em 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>

Esse elemento amp-img se ajusta automaticamente à largura do elemento contêiner, e a altura é automaticamente definida de acordo com a proporção determinada pela largura e a altura. Teste o recurso redimensionando essa janela de navegador:

Atributo de layout

O atributo layout dá a você controle fácil e por elemento sobre como seu elemento deve ser renderizado na tela. Muitas dessas opções são possíveis com CSS puro, mas são muito mais complicadas e exigem diversas modificações. Em vez disso, use o atributo layout.

Valores compatíveis com o atributo layout

Os valores a seguir podem ser usados no atributo layout:

Tipo de layout Largura/altura necessárias Comportamento
nodisplay Não O elemento não é exibido. Esse layout pode ser aplicado a todos os elementos da AMP. O componente não ocupa espaço na tela, pois não tem estilo de exibição. Presume-se que o elemento pode exibir a si mesmo por uma ação do usuário, como amp-lightbox.
fixed Sim O elemento tem uma largura e uma altura sem responsividade compatível. As únicas exceções são os elementos amp-pixel e amp-audio.
responsive Sim O elemento é dimensionado seguindo a largura do contêiner dele e redimensiona a altura automaticamente de acordo com a proporção determinada pelos atributos de largura e altura. Esse layout funciona muito bem com a maioria dos elementos da AMP, incluindo amp-img e amp-video. O espaço disponível depende do elemento pai e também pode ser personalizado usando CSS max-width.
fixed-height Somente altura O elemento ocupa o espaço disponível, mas mantém a altura inalterada. Esse layout funciona bem para elementos como amp-carousel ,que envolve conteúdo posicionado horizontalmente. Se o atributo width estiver presente, precisa ser igual a auto.
fill Não O elemento ocupa o espaço disponível na largura e na altura. Em outras palavras, o layout de um elemento de preenchimento corresponde ao pai dele.
container Não O elemento permite que o filho defina o tamanho, como um HTML normal div. Presume-se que o componente não tenha um layout específico, mas somente aja como um contêiner. Os filhos são renderizados imediatamente.
flex-item Não O elemento e outros elementos no pai dele ocupam o espaço restante no contêiner do pai quando este é um contêiner flexível (ou seja, display:flex ). O tamanho do elemento é determinado pelo elemento pai, e o número de elementos dentro do pai pelo layout CSS display:flex.

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

Em alguns casos, se width ou height não forem especificados, o tempo de execução da AMP pode usar o padrão desses valores, como mostrado a seguir:

  • amp-pixel: a largura e a altura estão definidas como o padrão de 0.
  • amp-audio: a largura e a altura padrão são inferidas do navegador.

O que acontece se o atributo layout não estiver especificado?

Se o atributolayout não estiver especificado, a AMP tenta inferir ou adivinhar o valor adequado:

Regra Layout inferido
height está presente ewidth está ausente ou é igual aauto. fixed-height
Os atributos width ouheight estão presentes com o atributosizes . responsive
Os atributos width ouheight estão presentes. fixed
width eheight não estão presentes. container

Uso de 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 website. Quando o tamanho ou a orientação da janela do navegador mudam, as consultas de mídia são reavaliadas, e os elementos são ocultos e exibidos com base nos novos resultados.

Consultas de mídia de elementos

Um recurso adicional para design responsivo disponível na AMP é o atributo media. O atributo pode ser usado em todos os elementos da AMP. Ele funciona de modo semelhante às consultas de mídia na folha de estilo global, mas só impacta o elemento específico em uma única página.

Por exemplo, aqui temos duas imagens com consultas de mídia mutuamente excludentes.

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

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

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