Responsivo

Layout que se adapta a qualquer largura, e não só às três telas que você desenhou.

Também aparece como "responsive", "adaptativo", "mobile first", "fluido".

No mundo do Design

O Figma chama isso de Constraints e resizing

No Figma você entrega três frames: mobile, tablet, desktop. No navegador existem infinitas larguras entre eles, e o layout precisa se virar em todas.

Responsivo é isso: em vez de descrever três estados fixos, você descreve como as coisas se comportam quando o espaço muda.

Três ferramentas resolvem quase tudo

/* 1. limite em vez de largura fixa */
.container {
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 20px;
}
 
/* 2. deixar o conteúdo decidir */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}
 
/* 3. e só então, mudar de layout de verdade */
@media (min-width: 768px) {
  .pagina { grid-template-columns: 240px 1fr; }
}

A ordem importa. Media query é o último recurso, não o primeiro. Quanto mais o layout se resolve sozinho, menos breakpoint você precisa manter.

A pergunta que muda o handoff

Em vez de "como fica no tablet", pergunte "o que acontece com este bloco quando ele fica mais estreito". A resposta pode ser quebrar linha, encolher, cortar, empilhar ou virar carrossel. Essas cinco palavras valem mais que um frame de 768px.

Outros termos de CSS

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.