AMP Como criar um layout responsivo

AMP Como criar um layout responsivo. No design responsivo, você pode usar consultas de CSS @media para definir o estilo da sua página da Web em várias dimensões de tela. É possível fazer isso sem alterar o conteúdo da página. Em uma página AMP, você pode continuar usando essas mesmas consultas de CSS @media.

Além disso, para um controle mais preciso sobre o elemento da página AMP, especifique nele o atributo media. Isso será muito útil caso você precise mostrar ou ocultar um elemento com base em uma consulta de mídia. Consulte a seção Como alterar a direção de arte de uma imagem para ver um exemplo que usa o atributo media.

Redimensionar cada elemento para que ele se ajuste à tela pode ser uma tarefa complicada*. No entanto, é fácil criar um elemento responsivo usando AMP. Basta você especificar o atributo "layout=responsive" junto com os atributos width e height do elemento. Quando você aplicar o layout responsive, o elemento a que ele é aplicado será redimensionado automaticamente à largura do elemento de contêiner. A altura será alterada com base na proporção especificada pelos atributos width e height do elemento. Quase todos os elementos da página AMP são compatíveis com o layout responsive. Consulte a documentação de referência do elemento para ver a compatibilidade dos layouts.

É fácil criar elementos responsivos com "layout=responsive". No entanto, é preciso considerar como seus elementos aparecerão em todos os tamanhos de tela, incluindo as dimensões para computador e tablet. Um erro comum é permitir que a imagem preencha toda a largura da tela. Como consequência disso, a imagem se expandirá para um tamanho maior que o pretendido, causando uma experiência ruim aos usuários de widescreen. Por padrão, os elementos com layout=responsive preencherão toda a largura do elemento de contêiner, que geralmente não tem limites para essa dimensão (como width=100%). Restrinja a largura do contêiner da imagem para aprimorar a maneira como ela é exibida. Por exemplo, ao configurar uma regra "max-width" em "body" ou "main", você pode limitar uma largura máxima específica para todas as imagens. Exemplo: como restringir a largura de imagens responsivas

No exemplo a seguir, temos uma imagem de flores (640 x 427 pixels) que será exibida em todos os tamanhos de tela. Por isso, especificaremos os atributos width e height e definiremos o layout como responsive.

Compartilhar: | | Whatsapp |
hits