Responsivo

Carregue ao construir, não só ao consertar. Layout responsivo pensado no fim vira uma pilha de breakpoints remendando decisões que nasceram fixas.

Para detectar o que já quebrou, veja audit-method. Para corrigir uma superfície existente, o verbo adapt em refine-verbs. Esta skill é sobre nascer certo.

A mudança de mentalidade

Media query é a ferramenta de último recurso, não a primeira. O CSS moderno resolve a maior parte da responsividade sem nenhum breakpoint — e um layout que se adapta sozinho não tem os saltos abruptos que denunciam design feito por régua.

A ordem de preferência:

1. Layout intrínseco — min(), max(), clamp(), flex-wrap, grid auto-fit. Adapta continuamente.
2. Container queries — o componente reage ao próprio espaço.
3. Media queries — só para mudanças de estrutura que nenhuma das anteriores resolve.

Layout intrínseco

Container sem breakpoint: