Responsivo vai além de empilhar colunas
Adapte conteúdo, navegação e controles ao espaço disponível, sem perder o objetivo da tarefa.
Uma interface responsiva preserva a tarefa em diferentes espaços. Reduzir a tela muda o custo de navegar, comparar, digitar e alcançar controles. A melhor adaptação pode exigir uma apresentação diferente do mesmo conteúdo.
Comece pelo conteúdo
Use palavras longas, nomes reais, valores grandes e mensagens de erro nos testes. Uma grade que funciona com títulos curtos pode transbordar quando o conteúdo muda. Elementos flexíveis precisam poder encolher; textos importantes não devem desaparecer sem alternativa.
| Superfície | Possível adaptação | Verifique |
|---|---|---|
| Grade | Reduzir colunas preservando a largura útil dos cartões. | Ordem de leitura e consistência. |
| Tabela | Rolagem localizada ou apresentação alternativa. | Cabeçalhos e relação entre dados. |
| Navegação | Recolher destinos secundários em um painel. | Abertura, fechamento e estado atual. |
| Lista e detalhe | Exibir a seleção em uma segunda etapa. | Volta à lista e preservação de contexto. |
Não esqueça o teclado virtual
Campos próximos da borda inferior podem ser cobertos. Painéis precisam permitir rolagem e manter uma forma de concluir ou cancelar. Evite alturas fixas para blocos de texto e mensagens variáveis.
Teste larguras intermediárias
O problema pode aparecer entre o celular e o desktop. Verifique mudanças de composição, zoom de texto e orientação. Conteúdo horizontal pode exigir rolagem própria, mas a página inteira não deve transbordar por acidente.
Para aprofundar: referência oficial ↗. Os exemplos e as explicações desta página são conteúdo editorial da Biblioteca UI.
Encontrar um componente →