Como deixar um site responsivo: 10 ajustes que fazem diferença

Dez mudanças para deixar um site responsivo: tag viewport, layout fluido, áreas de toque, formulários e imagens, com código pronto para copiar.

Para deixar um site amigável para celular, adicione uma meta tag viewport correta, faça o layout acompanhar a largura da tela em vez de usar larguras fixas em pixels, use media queries para reorganizar o conteúdo em telas pequenas, deixe o texto legível e os botões fáceis de tocar, e entregue imagens no tamanho certo para celular. Depois, teste em visualizações mobile de verdade. Os dez ajustes abaixo cobrem o que quase todo site não responsivo faz errado, na ordem em que vale atacar.

1. Adicione a meta tag viewport

Sem ela, o celular supõe que a página foi feita para desktop, renderiza com uns 980 px de largura e depois encolhe. O texto fica minúsculo e o usuário precisa dar zoom com os dedos. Coloque isto no <head> de todas as páginas:

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

Não adicione user-scalable=no nem maximum-scale=1; bloquear o zoom prejudica quem precisa de texto maior. Detalhes: a meta tag viewport explicada.

2. Troque larguras fixas por larguras fluidas

Um container com width: 960px não cabe numa tela de 390 px. Use porcentagens, max-width e ferramentas de layout modernas:

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

Flexbox com flex-wrap: wrap e CSS Grid com repeat(auto-fit, minmax(16rem, 1fr)) fazem as colunas quebrarem sozinhas, muitas vezes sem nenhuma media query.

3. Faça imagens e embeds encolherem

img, video, iframe {
  max-width: 100%;
  height: auto;
}

Para vídeos e mapas incorporados, use aspect-ratio: 16 / 9; width: 100% para que escalem sem quebrar o layout. Só essa regra já elimina muitos casos de rolagem lateral.

4. Reorganize o conteúdo com media queries

Alguns layouts precisam mudar, e não só encolher: a barra lateral vai para baixo do conteúdo, um rodapé de quatro colunas vira uma coluna só. Escreva primeiro o layout mobile e acrescente complexidade para telas largas:

.layout { display: grid; gap: 2rem; }

@media (min-width: 64rem) {
  .layout { grid-template-columns: 3fr 1fr; }
}

Como escolher as larguras está em breakpoints responsivos, e a sintaxe no guia de media queries CSS. A abordagem mobile first em si é explicada em design mobile first.

5. Use uma tipografia legível

Deixe o texto principal com pelo menos 16 px (1rem na maioria dos navegadores) e entrelinha de cerca de 1,5. Use unidades rem para o texto respeitar o tamanho de fonte configurado no navegador. Em telas grandes, mantenha uma largura de linha confortável com max-width: 65ch nos blocos de texto. Os títulos podem acompanhar a tela com clamp():

h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

6. Faça áreas de toque grandes e bem espaçadas

O dedo é menos preciso que o ponteiro do mouse. A WCAG 2.2 define um tamanho mínimo de alvo de 24 × 24 pixels CSS; as diretrizes de design da Apple e do Google recomendam uns 44–48 px para um toque confortável. Dê padding suficiente aos links no texto e aos botões de ícone, e espaço entre os vizinhos.

7. Crie uma navegação que funcione sem hover

Não existe hover em tela de toque. Em telas pequenas, use um botão de menu que abre uma lista no toque, mantenha poucos itens no nível principal e garanta que os subitens abram com toque e com teclado. Teste se o menu fecha quando um link é escolhido.

8. Ajuste os formulários para celular

Use os tipos de campo certos (email, tel, url, number) e inputmode, para o celular mostrar o teclado correspondente.
Adicione atributos autocomplete (name, email, street-address, cc-number) para o preenchimento automático funcionar.
Mantenha o texto dos campos em 16 px ou mais; o Safari do iOS dá zoom em campos menores quando eles recebem foco.
Em telas estreitas, coloque os rótulos acima dos campos e deixe o botão de envio com largura total.

9. Entregue imagens no tamanho do celular

Uma imagem de destaque de 2400 px é um download pesado no celular. Use imagens responsivas para o navegador escolher o arquivo adequado:

<img src="hero-800.jpg"
     srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(min-width: 64rem) 50vw, 100vw"
     alt="Dashboard do produto num celular">

Formatos modernos como WebP e AVIF reduzem ainda mais o tamanho. Adicione loading="lazy" às imagens abaixo da primeira dobra. Para deixar as páginas mais rápidas, veja o guia de teste de velocidade mobile.

10. Tire o que irrita no celular

Pop-ups de tela cheia logo na entrada, balões de chat em cima do botão “Comprar” e barras fixas que ocupam um quarto da tela deixam o site hostil no celular. Atrase os pop-ups, facilite o fechamento e mantenha os elementos fixos pequenos.

Como conferir o resultado

Depois de cada mudança, olhe a página num tamanho de celular. Um jeito rápido é uma visualização mobile no Chrome de desktop: o modo dispositivo do DevTools ou uma extensão de um clique como o Mobile View Extension, que recarrega a aba com um user agent mobile real e permite comparar tamanhos de aparelho. Depois rode uma auditoria Lighthouse mobile e, antes do lançamento, o checklist de teste de site mobile. As ferramentas que substituem o antigo teste de um clique do Google estão em alternativas ao teste de compatibilidade com dispositivos móveis.

Usa WordPress? Os princípios são os mesmos, mas a maioria dos ajustes acontece no tema. Veja como deixar um site WordPress responsivo.

Perguntas frequentes

Qual é o jeito mais rápido de deixar um site antigo responsivo?

Adicione a meta tag viewport, coloque max-width: 100% em imagens e embeds, tire as larguras fixas dos containers principais e empilhe as colunas com uma media query. Isso resolve numa tarde a maior parte da rolagem lateral e do texto minúsculo.

Preciso de um site mobile separado?

Não. Um único site responsivo, que se adapta à tela, é mais fácil de manter e é o que o Google recomenda. Sites m. separados são uma abordagem antiga.

Como saber se o meu site é amigável para celular?

Veja o site num tamanho de celular, rode uma auditoria Lighthouse no modo mobile e confira o print da Inspeção de URL no Google Search Console. Juntos, eles substituem o teste de compatibilidade com dispositivos móveis que o Google desativou.