Visão geral do layout responsivo
O design responsivo usa um layout flexível que se adapta a diferentes orientações ou tamanhos de janelas de visualização. Dessa forma, você não precisa criar vários layouts.
Seu documento precisa ter, no mínimo, dimensões de página responsivas. Também é possível criar um layout fluido definindo tamanhos e posições de objetos com porcentagens. Para personalizar cada elemento em diferentes tamanhos ou intervalos de tamanho da janela de visualização, use regras de mídia.
Os anúncios gráficos não podem ser responsivos, mas podem usar o fluxo de trabalho responsivo em um layout de vários tamanhos para exportar tamanhos diferentes de um único documento.
Dimensões da página responsiva
Tornar o documento geral responsivo
É necessário que os documentos responsivos tenham a largura e a altura da página definidas como 100% para preencher todo o espaço disponível na tela.
- Documentos existentes: no painel Responsivo, marque a caixa de seleção Layout responsivo.
- Novos arquivos: na caixa de diálogo “Novo arquivo”, marque a caixa de seleção Layout responsivo ao especificar dimensões. Essa opção não está disponível para todos os tipos de arquivo.
Para que o conteúdo da página seja responsivo, é possível usar regras de mídia e layout fluido.
Layout fluido
Tamanhos e posições baseados em porcentagem
Além das dimensões de página, também é possível especificar o tamanho e a posição dos elementos usando porcentagens em vez de pixels. As porcentagens preservam o tamanho e o alinhamento de um elemento em relação ao contêiner pai, mesmo quando ele é modificado.
Ao alinhar elementos, a opção layout fluido das ferramentas de alinhamento e distribuição permite definir posições baseadas em porcentagem facilmente.
Regras de mídia
Substituir atributos e estilos CSS para diferentes orientações e tamanhos
Com as regras de mídia, o documento detecta o tamanho e a orientação da janela de visualização e aplica estilos e atributos diferentes adequadamente. Por exemplo, um smartphone pode exibir conteúdo em uma única coluna, enquanto um tablet pode mostrar o mesmo conteúdo em duas. Essas mudanças, chamadas de substituições, ocorrem nos tamanhos ou intervalos de tamanho especificados.
É possível alternar entre diferentes conjuntos de regras no painel “Responsivo”:
- Regras padrão: selecione Editar documento de base ao alterar o conjunto padrão de estilos ou ao fazer mudanças que se apliquem a todos os tamanhos da janela de visualização, como adicionar ou excluir recursos, componentes ou eventos.
- Regras de mídia: selecione um tamanho específico ou um intervalo deles para substituir os atributos e estilos padrão do tamanho da janela de visualização.
Quando uma regra de mídia for selecionada, será possível definir estilos e atributos que se aplicam somente a esse tamanho ou intervalo. Por exemplo, é possível ajustar a posição, o tamanho, a origem, a visibilidade ou a animação de um elemento. O Google Web Designer também permite substituir o conteúdo do texto, as configurações de ajuste e as propriedades do componente.