Visão geral do layout responsivo

Como usar regras de mídia para criar layouts responsivos
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. O Google Web Designer oferece várias ferramentas para criar um design responsivo.

Dimensões da página responsiva

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

Novos arquivos

Na caixa de diálogo do novo arquivo, marque a caixa de seleção Layout responsivo ao especificar as dimensões. Essa opção não está disponível para todos os tipos de arquivo.

Documentos existentes

No painel Responsivo, marque a caixa de seleção Layout responsivo.

Tamanhos e posições baseados em porcentagem

Visão geral da criação de porcentagens

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 para modificar estilos CSS

Com as regras de mídia, o documento detecta o tamanho e a orientação da janela de visualização e aplica estilos 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 de estilo, chamadas de modificaçõ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 regras padrão 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 modificar os estilos padrão do tamanho da janela de visualização.

Quando uma regra de mídia for selecionada, será possível definir estilos 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.

Saiba mais sobre regras de mídia e modificações de estilo.

Isso foi útil?
Como podemos melhorá-lo?

Precisa de mais ajuda?

Faça login e veja mais opções de suporte para resolver o problema rapidamente.