Responsividade

1. Geral

O Mitra utiliza percentuais para definir altura, largura e posições x e y dos componentes, ao invés de pixels fixos. Isso permite uma adaptação automática dos elementos ao tamanho da tela, mas pode gerar problemas em componentes como labels e botões. Em particular, o conteúdo interno desses componentes, como o tamanho da fonte, precisa ser ajustado para garantir uma apresentação adequada em diferentes resoluções.

Um exemplo comum é uma label projetada em uma tela HD que, ao ser visualizada em uma tela com resolução inferior, pode apresentar um texto desproporcional ao restante do conteúdo. Para mitigar esse problema, o Mitra oferece a funcionalidade de pixel mínimo, que impede que a fonte de labels e botões diminua além de um certo ponto, garantindo a legibilidade do texto interno.

Por outro lado, componentes como tabelas e boards possuem fontes que mantêm sua quantidade de pixels de forma nativa, evitando o problema de diminuição excessiva do texto.

Para facilitar o desenvolvimento de telas responsivas, o Mitra inclui uma ferramenta que permite alterar temporariamente a resolução no Page Builder em modo de desenvolvimento, ajudando os desenvolvedores a visualizar como suas interfaces se comportaram em diferentes dispositivos e tamanhos de tela.

2. Boas Práticas para Construção de Telas Responsivas no Mitra

Definir Pixel Mínimo: Utilize a funcionalidade de pixel mínimo para labels e botões para garantir a legibilidade do texto em diferentes resoluções.

Testar com Resoluções Diferentes: Utilize a ferramenta de alteração de resolução no Page Builder para verificar como a interface se adapta a diferentes tamanhos de tela.

Desenvolvimento para Mobile: Para telas destinadas ao uso em dispositivos móveis, utilize o Page Builder Mobile para priorizar a verticalização e garantir uma experiência de usuário otimizada.