Como Tornar um Site Responsivo para Celular

Para tornar um site responsivo para celular, adicione uma meta tag viewport, construa o layout pensando primeiro no celular, com larguras flexíveis, e use pontos de quebra em CSS para reorganizá-lo em telas maiores — empilhando colunas, recolhendo o menu e ajustando as imagens ao espaço. Depois, confira cada página na largura de celular para ver se há rolagem lateral, textos pequenos e botões pequenos demais para tocar. Em um site criado com IA, um prompt claro somado a uma revisão em uma prévia do tamanho de celular costuma resolver a maior parte.

O que é design responsivo de fato

Um site responsivo usa um único conjunto de páginas e URLs que se adaptam à tela. Em vez de um site "m." separado, o CSS muda o layout em certas larguras, chamadas pontos de quebra (breakpoints). Os blocos básicos são:

A meta tag viewport avisa os navegadores móveis para usar a largura real do dispositivo.
Layouts fluidos usam porcentagens, flexbox e grid, em vez de larguras fixas em pixels.
Media queries (ou classes de framework, como md: do Tailwind) mudam o layout acima de determinada largura.
Mídia flexível — imagens e vídeos que encolhem para caber no contêiner.

Isso importa porque boa parte do seu tráfego provavelmente vem de celulares e porque o Google indexa a versão móvel das suas páginas. Se conteúdo ou links existem só no desktop, o Google também pode não vê-los.

Opções e trade-offs

Abordagem	Como funciona	Boa para	Trade-off
Responsivo mobile-first	Estilos base para celular, depois layout para telas maiores	Sites e apps novos (recomendado)	Exige pensar primeiro no pequeno
Responsivo desktop-first	Estilos de desktop, depois sobrescritas para telas menores	Adaptar um site de desktop já existente	Mais sobrescritas; o celular tende a parecer um detalhe
Site separado para celular	URLs diferentes para celulares	Raramente justificado hoje	Dois sites para manter, complicações de SEO
Progressive web app (PWA)	Site responsivo que pode ser instalado na tela inicial	Ferramentas parecidas com apps, usadas com frequência	Configuração extra; veja apps nativos vs. web progressivos

O mobile-first costuma ser mais simples: uma coluna única é o layout mais fácil, e adicionar colunas conforme o espaço cresce dá menos trabalho do que removê-las.

As partes que costumam quebrar

A meta tag viewport

Se uma página parece um pequeno site de desktop no celular, a tag viewport está faltando:

<meta name="viewport" content="width=device-width, initial-scale=1">

Não adicione maximum-scale=1 nem user-scalable=no. Bloquear o zoom com pinça dificulta o uso do site para pessoas com baixa visão.

Larguras fixas e rolagem horizontal

O bug responsivo mais comum é algo mais largo que a tela: um contêiner de width: 1200px fixo, uma tabela larga, uma URL longa ou um bloco de código, uma imagem sem max-width: 100%. A página inteira passa a rolar para o lado. Use max-width em vez de width, deixe o texto quebrar linha e dê a elementos largos a sua própria área de rolagem.

Navegação

Cinco links de menu de desktop raramente cabem em um celular. A solução usual é um botão de menu que abre um painel. Mantenha visíveis as duas ou três ações mais importantes — "Agendar", "Carrinho", "Entrar" — e garanta que o menu funcione com teclado e feche com facilidade.

Texto e áreas de toque

Um texto de corpo em torno de 16 px é um mínimo razoável no celular. Campos com texto menor fazem o iPhone dar zoom ao tocar neles.
Deixe botões e links fáceis de acertar. O WCAG 2.2 AA estabelece um piso de 24 por 24 pixels CSS (ou espaçamento suficiente); cerca de 44 pixels é mais confortável para o polegar.
Deixe espaço entre links vizinhos para que as pessoas não toquem no errado.

Tabelas e dados

Tabelas largas são a parte mais difícil de um app responsivo. Opções, em ordem de preferência: mostrar menos colunas no celular, transformar cada linha em um cartão ou colocar a tabela em um contêiner com rolagem horizontal e a primeira coluna fixa. Escolha conforme o que as pessoas precisam comparar.

Imagens e mídia

Use max-width: 100% e height: auto, sirva arquivos menores para telas pequenas com srcset e defina largura e altura para evitar saltos no layout. Vídeos e mapas incorporados precisam de um contêiner responsivo para manter a proporção. Imagens menores também deixam as páginas mais rápidas — veja como deixar seu site mais rápido.

Formulários

Coloque os rótulos acima dos campos, deixe os campos com largura total e use os tipos de entrada certos (type="email", type="tel", inputmode="numeric") para que o celular mostre o teclado adequado. Posicione o botão de envio onde o polegar alcance e mantenha-o visível quando o teclado abrir.

Interações que dependem de hover

Celulares não têm hover. Dicas, menus suspensos e prévias que só aparecem com o cursor sobre o elemento ficam invisíveis para quem usa toque. Faça-os funcionar também com toque.

Prompts que funcionam

Para uma construção nova, diga logo no início:

Construa pensando primeiro no celular. Uma coluna nos celulares, duas colunas a partir da largura de tablet, layout completo no desktop. Nada de rolagem horizontal com 320 px de largura, texto do corpo com pelo menos 16 px, áreas de toque com pelo menos 44 px, um botão de menu em telas pequenas e tabelas que viram cartões no celular.

Para uma página existente, descreva o que você vê:

No celular, a página /pricing rola para o lado e os três cartões de plano ficam espremidos lado a lado. Empilhe os cartões verticalmente abaixo de 768 px, faça a tabela comparativa rolar horizontalmente dentro do próprio contêiner com a coluna de funcionalidades fixa e mantenha o layout de desktop como está.

Confira cada página com 375 px de largura. Liste tudo o que transborda, se sobrepõe, tem texto menor que 16 px ou áreas de toque menores que 44 px, ou só funciona com hover, e depois corrija cada item.

Passo a passo

Confirme a tag viewport no cabeçalho da página.
Teste em 320–375 px de largura no modo de dispositivo do navegador ou em uma prévia do tamanho de celular. Role cada página do topo ao fim.
Corrija primeiro a rolagem horizontal. Encontre o elemento que está largo demais; todo o resto é difícil de avaliar enquanto ele existir.
Organize a navegação: botão de menu, ações principais visíveis.
Confira texto, áreas de toque e formulários em cada fluxo importante — cadastro, busca, checkout, contato.
Trate tabelas e mídia: cartões ou contêineres com rolagem, imagens e incorporações responsivas.
Confira os tamanhos intermediários. Arraste a largura devagar do celular até o desktop; os layouts costumam quebrar perto da largura de tablet.
Teste em um celular de verdade. Emuladores deixam passar coisas como o teclado da tela cobrindo um botão, os recortes de tela (notch) e a velocidade do site na rede móvel.

Erros comuns

Testar em um só tamanho de celular. Confira um celular pequeno, um grande e um tablet.
Esconder conteúdo no celular para caber. O Google indexa a versão móvel, e quem usa o celular quer as mesmas informações.
Desativar o zoom na tag viewport.
Imagens do tamanho de desktop no celular, o que custa tempo de carregamento e dados.
Elementos fixos se acumulando: um cabeçalho fixo, um banner de cookies e um balão de chat podem cobrir metade da tela do celular.
Pop-ups que não podem ser fechados em telas pequenas porque o botão de fechar fica fora da tela.

Checklist para celular

Meta tag viewport presente; zoom não desativado
Nenhuma rolagem horizontal em 320 px em nenhuma página
Texto do corpo em cerca de 16 px; campos não disparam zoom
Áreas de toque suficientemente grandes e espaçadas
Menu funciona em celulares e com teclado
Tabelas legíveis no celular (cartões, menos colunas ou contêiner com rolagem)
Imagens e incorporações se ajustam; arquivos de tamanho adequado
Formulários usam os tipos de entrada certos; botão de envio alcançável
Nada importante depende de hover
Testado em pelo menos um celular real

O layout responsivo também faz parte da acessibilidade: o WCAG exige que o conteúdo funcione em 320 px de largura e com zoom de 200%. Se você está construindo um app que as pessoas vão usar todo dia no celular, como criar um app web compatível com celular vai além, incluindo PWAs instaláveis.

Design responsivo na Mythex

A Mythex constrói apps web responsivos, e no plano Pro pode empacotá-los como apps Android e iPhone. No workspace, clique no ícone de celular acima do Preview (Switch to Mobile) para ver seu app em um quadro do tamanho de celular, e arraste a borda do quadro para testar outras larguras (Preview e Code). A documentação tem um prompt inicial curto para corrigir o layout em telas pequenas em prompts de responsividade para celular. Teste também em um celular de verdade — abra a URL publicada ou compartilhe um link de prévia e abra-o no seu celular.

Perguntas

O que significa responsivo para celular?

Um site responsivo se adapta ao tamanho da tela em que é exibido. A mesma página e a mesma URL se reorganizam para celular, tablet ou desktop — as colunas empilham, as imagens diminuem, os menus se recolhem — em vez de mostrar uma página de desktop reduzida ou um site separado para celular.

Por que meu site aparece com zoom afastado no celular?

Quase sempre é a falta da meta tag viewport. Sem ela, os navegadores móveis renderizam a página como se a tela tivesse a largura de um desktop e depois a reduzem. Adicione uma tag viewport com width=device-width e initial-scale=1.

Para quais tamanhos de tela devo projetar?

Projete para o conteúdo, não para dispositivos: comece com cerca de 320 a 375 pixels de largura e adicione pontos de quebra onde o layout começar a parecer errado. Frameworks comuns, como o Tailwind CSS, usam pontos de quebra padrão em torno de 640, 768, 1024 e 1280 pixels.

A responsividade para celular afeta o ranking no Google?

O Google usa a versão para celular das páginas para indexação, então conteúdo ou links ausentes no celular podem faltar na visão que o Google tem da página. Um layout utilizável no celular também importa para os Core Web Vitals e para os visitantes.