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.
