Responsividade no Ionic: adaptando para diferentes tamanhos de tela

O que significa “responsividade” no Ionic

Responsividade é a capacidade do app ajustar layout, espaçamentos e densidade de informação conforme o tamanho e a orientação da tela (celular pequeno, celular grande, tablet em retrato/paisagem). No Ionic, isso costuma ser feito combinando: grid (para distribuir colunas), breakpoints (para trocar regras em larguras específicas) e unidades responsivas (para evitar medidas rígidas).

O objetivo não é “esticar” a mesma tela para todo mundo, e sim manter: hierarquia visual (o que é mais importante aparece primeiro), áreas de toque confortáveis (botões e itens clicáveis com tamanho adequado) e legibilidade (textos que não truncam e não estouram o container).

Grid do Ionic na prática (celular vs tablet)

O ion-grid organiza o conteúdo em linhas e colunas. Você define quantas colunas cada bloco ocupa em diferentes tamanhos de tela usando atributos como size, size-sm, size-md, size-lg, etc.

Exemplo: lista + painel de detalhes (1 coluna no celular, 2 no tablet)

<ion-grid>  <ion-row>    <ion-col size="12" size-md="5">      <ion-card>        <ion-card-header>          <ion-card-title>Itens</ion-card-title>        </ion-card-header>        <ion-card-content>          <ion-list>            <ion-item button detail>Item A</ion-item>            <ion-item button detail>Item B</ion-item>            <ion-item button detail>Item C</ion-item>          </ion-list>        </ion-card-content>      </ion-card>    </ion-col>    <ion-col size="12" size-md="7">      <ion-card>        <ion-card-header>          <ion-card-title>Detalhes</ion-card-title>        </ion-card-header>        <ion-card-content>          Selecione um item para ver detalhes.        </ion-card-content>      </ion-card>    </ion-col>  </ion-row></ion-grid>

Como ler: no celular (size="12") cada coluna ocupa a largura toda, empilhando. Em telas médias para cima (size-md), vira duas colunas (5/7), melhor para tablets.

Boas práticas com grid

• Evite colunas estreitas demais: se um bloco ficar com menos de ~320px de largura útil, o conteúdo tende a quebrar/truncar. Prefira empilhar em vez de forçar 2–3 colunas no celular.
• Use espaçamento consistente: combine grid com padding/margens leves para não “apertar” o conteúdo em telas pequenas.
• Priorize a ordem do conteúdo: no celular, o que vem primeiro na hierarquia deve aparecer primeiro no fluxo vertical.

Breakpoints: quando mudar layout (e não só redimensionar)

Breakpoints são regras condicionais por largura de tela. No Ionic/Angular, você pode usar breakpoints em CSS (media queries) para ajustar densidade, espaçamento, visibilidade de elementos e até reorganizar blocos.

Continue em nosso aplicativo e ...

• Ouça o áudio com a tela desligada
• Ganhe Certificado após a conclusão
• + de 5000 cursos para você explorar!

ou continue lendo abaixo...

Baixar o aplicativo

Exemplo: ajustar padding e densidade em telas maiores

/* Exemplo de SCSS/CSS do componente */ .page-wrap {   padding: 12px; }  @media (min-width: 768px) {   .page-wrap {     padding: 20px;   }   .dense-on-tablet ion-item {     --min-height: 52px;   } }

Ideia: no celular, menos padding para caber mais conteúdo sem rolagem excessiva; no tablet, mais respiro e itens um pouco mais altos para conforto.

Exemplo: esconder um elemento secundário no celular

.secondary-info {   display: none; }  @media (min-width: 768px) {   .secondary-info {     display: block;   } }

Use isso para informações complementares (ex.: dicas, filtros avançados) que atrapalham a leitura em telas pequenas.

Unidades responsivas: evitando medidas rígidas

Medidas fixas em px podem causar problemas quando a tela é pequena ou quando o usuário usa fonte maior. Prefira unidades que se adaptem:

• % e flex: para larguras e distribuição de espaço.
• rem: para tamanhos relacionados à fonte base (melhor acessibilidade).
• vh/vw: com cuidado (barras do sistema podem afetar altura útil).
• clamp(): para tipografia e espaçamentos que crescem até um limite.

Exemplo: título que escala sem exagerar

h1.page-title {   font-size: clamp(1.2rem, 2.5vw, 1.8rem);   line-height: 1.2; }

Exemplo: cards com largura fluida e limite

.card-wrap {   max-width: 960px;   margin: 0 auto;   padding: 0 12px; }

Isso evita que o conteúdo fique “espalhado” demais em tablets grandes, mantendo leitura confortável.

Decisões de layout: densidade, hierarquia e áreas de toque

Densidade (quanto cabe na tela)

• Celular: prefira 1 coluna, textos mais curtos, ações principais visíveis e filtros recolhíveis (ex.: dentro de um accordion ou modal).
• Tablet: aproveite 2 colunas para reduzir navegação (lista + detalhes, filtros laterais), mas mantenha limites de largura para leitura.

Hierarquia (o que o usuário vê primeiro)

• Coloque a ação principal em posição previsível (ex.: botão primário no topo do conteúdo ou no final do formulário).
• Use títulos e subtítulos para “quebrar” seções longas; em telas pequenas, seções grandes viram rolagem cansativa.
• Evite múltiplos CTAs concorrendo na mesma área; em telas pequenas isso vira ruído.

Áreas de toque (tap targets)

• Garanta que itens clicáveis tenham altura confortável. Em listas, prefira ion-item com conteúdo claro e área inteira clicável (button).
• Evite ícones pequenos como única ação; combine ícone + texto ou aumente o alvo de toque.
• Deixe espaço entre ações destrutivas e ações comuns para reduzir toques acidentais.

Padrões para evitar problemas comuns em telas pequenas

1) Overflow horizontal (conteúdo “vazando” para o lado)

Causas típicas: textos longos sem quebra, tabelas largas, imagens com largura fixa, padding excessivo.

• Quebra de texto para strings longas (IDs, URLs):

.break-long {   overflow-wrap: anywhere;   word-break: break-word; }

• Imagens responsivas:

img.responsive {   max-width: 100%;   height: auto;   display: block; }

• Evite larguras fixas em containers dentro do ion-content. Se precisar, use max-width e centralize.

2) Colunas apertadas (grid “forçado” no celular)

Se você colocou 2–3 colunas no celular, o conteúdo vira uma coluna estreita e ilegível. Ajuste para empilhar em telas pequenas:

<ion-row>  <ion-col size="12" size-sm="6" size-lg="4">...</ion-col>  <ion-col size="12" size-sm="6" size-lg="4">...</ion-col>  <ion-col size="12" size-sm="12" size-lg="4">...</ion-col></ion-row>

Interpretação: no celular, tudo em 1 coluna; em telas pequenas/médias, 2 colunas; em telas grandes, 3 colunas.

3) Textos truncados (cortados com “...”) sem intenção

Alguns componentes podem truncar texto por falta de espaço. Quando o texto precisa aparecer completo, permita quebra de linha:

ion-item .label-multiline {   white-space: normal;   line-height: 1.3; }

Se o truncamento for desejado (ex.: títulos em cards), faça de forma controlada:

.truncate-2 {   display: -webkit-box;   -webkit-line-clamp: 2;   -webkit-box-orient: vertical;   overflow: hidden; }

4) Formulários “espremidos” e teclado cobrindo campos

• Prefira campos em coluna única no celular; em tablet, agrupe em duas colunas apenas quando os campos forem curtos (ex.: UF + CEP).
• Evite botões fixos muito baixos que competem com o teclado; mantenha ações principais em área visível e com rolagem natural.
• Use espaçamento vertical consistente entre campos para reduzir erros de toque.

5) Tabelas largas em telas pequenas

Em vez de tentar “encaixar” uma tabela, transforme em cards no celular e mantenha tabela no tablet/desktop.

Passo a passo: tornar uma tela de “Produtos” responsiva

Passo 1 — Definir a estrutura base com grid

Vamos supor uma tela com filtros e listagem. No celular, filtros vão acima; no tablet, filtros ficam na lateral.

<div class="page-wrap">  <ion-grid>    <ion-row>      <ion-col size="12" size-md="4">        <ion-card class="filters">          <ion-card-header>            <ion-card-title>Filtros</ion-card-title>          </ion-card-header>          <ion-card-content>            <ion-item><ion-label>Categoria</ion-label></ion-item>            <ion-item><ion-label>Preço</ion-label></ion-item>          </ion-card-content>        </ion-card>      </ion-col>      <ion-col size="12" size-md="8">        <ion-list>          <ion-item button detail>            <ion-label class="label-multiline">              <h3 class="truncate-2">Produto com nome potencialmente longo</h3>              <p class="break-long">SKU-1234567890-ABCDE</p>            </ion-label>          </ion-item>        </ion-list>      </ion-col>    </ion-row>  </ion-grid></div>

Passo 2 — Ajustar espaçamentos por breakpoint

.page-wrap {   padding: 12px; }  @media (min-width: 768px) {   .page-wrap {     padding: 20px;   }   .filters {     position: sticky;     top: 12px;   } }

No tablet, filtros “grudam” ao rolar (quando fizer sentido), reduzindo esforço do usuário.

Passo 3 — Garantir legibilidade e evitar truncamentos acidentais

.label-multiline {   white-space: normal; }  .break-long {   overflow-wrap: anywhere; }  .truncate-2 {   display: -webkit-box;   -webkit-line-clamp: 2;   -webkit-box-orient: vertical;   overflow: hidden; }

Passo 4 — Revisar áreas de toque

Checklist rápido:

• Itens de lista com button para tornar a linha inteira clicável.
• Evitar colocar dois botões pequenos lado a lado no celular; prefira menu de ações ou empilhar botões.
• Manter ações destrutivas separadas e com confirmação quando necessário.

Como testar em múltiplos tamanhos (rotina prática)

1) Teste por faixas de largura (mínimo recomendado)

• 320–360px: celulares pequenos (onde aparecem mais problemas de overflow).
• 390–430px: celulares maiores.
• 768px: tablet em retrato (ponto comum para mudar layout).
• 1024px+: tablet em paisagem.

2) Teste orientação e densidade

• Gire a tela e observe se o layout “quebra” (colunas demais, cards esticados).
• Simule textos maiores (acessibilidade): verifique se títulos, botões e labels continuam legíveis e sem sobreposição.

3) Checklist de problemas frequentes

• Existe rolagem horizontal? Se sim, identifique o elemento que está maior que a tela.
• Algum texto importante ficou truncado sem intenção?
• Botões ficaram próximos demais, aumentando chance de toque errado?
• Em tablet, o conteúdo ficou largo demais (linhas muito compridas)? Use max-width e centralização.
• Listas e formulários continuam confortáveis com uma mão no celular?