Versão de demonstração: os dados deste texto ainda passam por revisão de fatos.
Neste artigo
O que é resolução de tela
A resolução de tela é o número de pixels que o monitor ou a tela mostra, em largura e em altura. Um celular tem uma tela estreita e alta. Um computador tem uma tela larga. Quando você projeta um site, a largura disponível muda, e o layout precisa acompanhar essa mudança.
Levantamentos de navegação mostram quais resoluções são mais comuns em cada período, mas essas listas mudam com o tempo. Por isso, este texto não fixa uma tabela de tamanhos. Consulte um levantamento atual antes de escolher os pontos de quebra do seu projeto.
O mais útil não é decorar tamanhos. É entender que o visitante pode chegar com qualquer largura de tela, e o site precisa funcionar em todas elas.
Por que o site precisa ser responsivo
Segundo a Google, a busca usa a versão mobile do conteúdo para indexar as páginas. Esse modelo é chamado de mobile-first indexing. Um site que só funciona bem no computador perde espaço, porque o rastreador enxerga a versão do celular.
Além da busca, o visitante também sente a diferença. Quando o texto fica pequeno, a imagem corta e o botão é difícil de tocar, a pessoa costuma sair da página. O site responsivo reduz esse atrito e mantém a leitura confortável.
Para empresas, a consequência é direta. Uma campanha que leva o cliente a uma página ruim no celular desperdiça o investimento. Para ver outros elementos de um site de empresa, leia elementos essenciais de um bom site para empresas, do Mundo Marketing.
Responsivo ou mobile-first: qual escolher
O design responsivo costuma partir do computador e depois se ajusta a telas menores. O mobile-first faz o caminho contrário: começa pelo celular e amplia o layout para telas maiores. Nas duas abordagens, o objetivo é o mesmo, que é uma boa experiência em qualquer aparelho.
Na prática, o mobile-first costuma forçar o time a priorizar o essencial, porque há pouco espaço. Já o responsivo pode ser mais natural para quem está acostumado a projetar para telas grandes. Escolha a que sua equipe domina e que atende ao público.
Como projetar na prática
- Comece pela largura pequena. Escreva o layout em uma coluna, com textos e botões que cabem em um celular.
- Use medidas relativas. Em vez de larguras fixas em pixels, prefira porcentagens e limites como max-width.
- Use media queries para mudar o layout em telas maiores. A media query testa a largura da janela e aplica regras de CSS quando a condição é verdadeira.
- Informe a largura do dispositivo no head. A meta viewport faz o celular usar a largura real da tela.
<meta name="viewport" content="width=device-width, initial-scale=1">
- Ajuste as imagens para não estourar a tela.
img { max-width: 100%; height: auto; }
@media (min-width: 40em) {
.colunas { display: flex; gap: 16px; }
}
O valor do corte no exemplo é ilustrativo. Escolha o ponto de quebra de acordo com o seu layout, testando o resultado.
Como testar antes de publicar
Abra o site no navegador e ative o modo de design responsivo nas ferramentas do desenvolvedor. No Firefox, a função se chama Responsive Design Mode, e ela simula tamanhos diferentes de tela. Mude a largura aos poucos e observe onde o layout quebra.
A simulação não substitui o teste real. Faça também uma navegação completa em um celular de verdade, tocando nos botões, preenchendo o formulário e rolando a página. Esse teste revela problemas de toque e de desempenho que a simulação não mostra.
Erros comuns
- Largura fixa em pixels, que faz a página passar da borda da tela.
- Texto pequeno demais, que obriga o visitante a dar zoom.
- Botões pequenos e juntos, difíceis de tocar com o dedo.
- Imagens pesadas, que demoram a carregar em conexões fracas.
- Falta da meta viewport, o que faz o celular mostrar a página encolhida.
Se o assunto for a estrutura geral da internet, a resposta completa explica como um site chega até o visitante. Mais textos sobre internet e sites estão na resposta. Para o panorama geral do MundoBlá, use a resposta.
Em outros Mundos
Quem depende do celular para vender deve olhar também a parte de marketing, que aparece em marketing mobile: como alcançar o consumidor no celular, do Mundo Marketing.
Tudo sobre
- Como criar um site em HTML passo a passo
- Site responsivo: resolução de tela e como projetar
Perguntas frequentes
O que é um site responsivo?
É um site que se adapta ao tamanho da tela de quem acessa. O layout muda de forma para caber em celular, tablet ou computador, sem obrigar o visitante a dar zoom ou rolar para os lados. Um único endereço atende a todos os aparelhos.
O que é resolução de tela?
É a quantidade de pixels que a tela mostra, em largura e altura. Ela varia entre celulares, tablets e monitores. Como o tamanho muda de aparelho para aparelho, o site precisa se ajustar, em vez de contar com uma medida fixa.
Preciso projetar uma versão para cada resolução?
Não. Projetar para cada tamanho específico não acompanha a variedade de aparelhos. O caminho mais seguro é criar um layout flexível e testá-lo em larguras de celular, tablet e computador. Assim o site funciona em telas que você nem imaginou.
Site responsivo ajuda no Google?
Ajuda. Segundo a Google, ela usa a versão mobile do conteúdo para indexar as páginas, no modelo chamado mobile-first indexing. Por isso, um site que funciona mal no celular pode ter menos visibilidade. Vale testar a página no celular com frequência.
Responsivo é o mesmo que mobile-first?
Não exatamente. O design responsivo costuma partir do computador e se ajustar a telas menores. O mobile-first começa pelo celular e amplia o layout para telas maiores. As duas abordagens buscam a mesma boa experiência em todos os aparelhos.
O que é a meta viewport?
É uma linha no head que informa ao celular para usar a largura real da tela. Sem ela, boa parte dos celulares mostra a página como se fosse de computador, reduzida. A forma usual é width igual a device-width e initial-scale igual a 1.
O que são media queries?
São regras do CSS que aplicam estilos quando uma condição é verdadeira, como a largura da janela. Com elas, o layout pode passar de uma coluna para duas em telas maiores. O valor de corte depende do seu layout e deve ser testado.
Como deixar as imagens responsivas?
Use max-width igual a 100% e height igual a auto. Assim a imagem nunca passa da largura do bloco onde está e mantém a proporção. Evite largura fixa em pixels nas imagens do conteúdo.
Por que o texto fica pequeno no celular?
Em geral, o tamanho da letra foi definido com valor fixo, ou falta a meta viewport. Confira a viewport primeiro. Depois, use unidades relativas, como em e rem, para o texto, e verifique se o contraste continua bom.
Como testar um site responsivo?
Abra o site no navegador e ative o modo de design responsivo nas ferramentas do desenvolvedor. Ele simula larguras diferentes. Depois, teste no celular de verdade, porque a simulação não mostra tudo, como o toque na tela e o desempenho.
Botões pequenos atrapalham a navegação?
Atrapalham bastante. No celular, o dedo precisa de uma área suficiente para tocar sem errar. Deixe os botões grandes, com espaço entre eles, e evite links apertados em listas. Isso reduz toques errados e frustração do visitante.
Quais são os erros mais comuns?
Largura fixa em pixels, que estoura a tela. Texto pequeno, botões juntos, imagens pesadas e falta da meta viewport. Esses erros aparecem em boa parte dos sites que nunca foram testados no celular, e quase todos são fáceis de corrigir.
Site responsivo fica mais lento?
Não precisa. O layout flexível usa o mesmo HTML e o mesmo CSS para todos os aparelhos. O que costuma pesar é a imagem. Otimize o tamanho dos arquivos e use formatos leves para não atrasar o carregamento em conexões mais fracas.
Dá para tornar um site antigo responsivo?
Dá, mas o trabalho varia. Comece pela meta viewport e depois ajuste imagens, textos e os blocos principais. Em alguns casos, refazer o layout compensa mais do que remendar uma estrutura antiga e difícil de manter.
Quem deve testar o site?
Quem cria e também quem usa. Teste você mesmo, em pelo menos um celular e um computador. Peça a alguém de fora do projeto para navegar sem instruções. A pessoa mostra problemas que você não percebe, porque já conhece o site.
O que é a indexação mobile-first?
É o modo como a Google usa a versão mobile do conteúdo para indexar as páginas. Segundo a própria Google, o rastreador usa o agente de smartphone. Por isso, o conteúdo que aparece no celular precisa ser completo e fácil de encontrar.
Onde ver a documentação oficial?
A MDN explica design responsivo, media queries e viewport em português. A Google publica boas práticas de indexação mobile-first na documentação do Search Central. Confira as duas fontes antes de decidir o layout do site.
Referências
- MDN Web Docs, design responsivo. Disponível em: https://developer.mozilla.org/pt-BR/docs/Learn/CSS/CSS_layout/Responsive_Design.
- Google Search Central, indexação mobile-first. Disponível em: https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing.
Fontes conferidas em 28 de outubro de 2026.