Módulo 3 · 2 de 7
Responsivo vs. adaptativo
Leitura: ~4 min
Agora que você entende que pixels não são todos iguais e que unidades relativas existem para respeitar o contexto do usuário, vem a próxima pergunta: como o layout se adapta a telas diferentes? A resposta envolve dois conceitos que aparecem muito em conversas com devs, e é importante que você saiba a diferença entre eles.
Responsivo vs. adaptativo: qual a diferença?
Esses dois termos aparecem muito em conversas com devs, e é importante que você saiba a diferença:
- Design responsivo: o layout é fluido. Ele se ajusta continuamente conforme a tela muda de tamanho, como se fosse água preenchendo qualquer recipiente. Usa porcentagens, grids flexíveis e media queries. É o padrão da web moderna.
- Design adaptativo: você cria layouts fixos para tamanhos específicos (por exemplo, 375px, 768px, 1440px). O sistema detecta o tamanho da tela e carrega a versão mais próxima. Menos fluido, mais controlado.
Para deixar mais claro, pense assim:
- Responsivo é como água enchendo um copo: o mesmo líquido se adapta continuamente a qualquer recipiente. Existe um design que flexibiliza. Mesmo HTML, mesmo CSS, tudo fluido.
- Adaptativo é como ter roupas diferentes para ocasiões diferentes: você não ajusta a mesma roupa, você troca de roupa. São vários layouts distintos, e o sistema escolhe qual carregar com base no tamanho da tela.
A diferença prática fundamental: responsivo é UM design que flexiona. Adaptativo são MÚLTIPLOS designs que alternam. No responsivo, se você redimensionar a janela do navegador lentamente, vai ver o conteúdo se rearranjando em tempo real, sem saltos. No adaptativo, o layout fica estático até atingir um breakpoint, e aí pula para outra versão de uma vez.
Na prática, a maioria dos projetos modernos usa uma combinação dos dois: um layout responsivo com breakpoints adaptativos em pontos críticos.
Breakpoints: onde o layout "decide" mudar
Breakpoints são os pontos de largura onde você define que o layout precisa se reorganizar. Os mais comuns em 2026:
- 320-375px: celulares pequenos (Galaxy A14, iPhone SE)
- 768px: tablets em retrato
- 1024px: tablets em paisagem, laptops compactos
- 1440px: desktops padrão
- 1920px+: monitores grandes
Mas aqui vai uma dica importante: não decore breakpoints como se fossem regras absolutas. Observe onde o seu conteúdo quebra e coloque o breakpoint ali. O conteúdo guia o breakpoint, não o contrário.
Media queries: as regras do layout
Para quem ainda não teve contato com o termo: media queries são instruções no CSS que dizem ao navegador "quando a tela tiver essa largura, aplique essas regras". É o mecanismo técnico por trás dos breakpoints. Quando um dev fala "vou adicionar uma media query para mobile", ele está dizendo que vai criar regras visuais específicas para telas pequenas.
Como designer, você não precisa escrever media queries. Mas precisa entender que elas existem e que cada breakpoint no seu Figma vai se traduzir em uma media query no código. Quanto mais breakpoints você definir, mais trabalho de implementação. Por isso, a conversa com o dev sobre quais breakpoints realmente importam é uma conversa de design, não só de código.
Checagem rápida
Sem nota, sem pressão. Responda de cabeça e depois abra para conferir.
Um dev fala que resolveu a tela "no responsivo". Você redimensiona a janela e o layout escorrega suave, sem saltos. Isso confirma o quê?
Que é um único design que flexiona, não vários que alternam. No responsivo existe um só layout, fluido, que se reajusta continuamente conforme a largura muda. Se fosse adaptativo, o layout ficaria parado e daria um pulo seco ao cruzar um breakpoint, trocando para outra versão de uma vez.
O PM te manda a lista de breakpoints "oficiais" da empresa e pede para seguir à risca. Onde mora o risco?
Breakpoint não é decoreba de número redondo. Quem deve guiar o breakpoint é o conteúdo: o ponto certo é onde o seu layout começa a quebrar, apertar ou ficar ilegível. Use a lista como referência, mas observe onde o conteúdo pede a mudança e coloque o breakpoint ali.