Mobile-first
Existem duas ordens possíveis para escrever um CSS responsivo, e uma delas tende a gerar menos código e menos surpresas.
Estudar esta lição interativa →Existem duas estratégias para combinar CSS base com media queries. Desktop-first: o CSS base já é pensado para telas grandes, e media queries com max-width "encolhem" o layout para telas menores. Mobile-first: o CSS base já é pensado para o celular (a tela mais restrita), e media queries com min-width "expandem" o layout para telas maiores.
Pense em fazer as malas para uma viagem: é mais fácil começar com o essencial (o que cabe numa mochila pequena) e ir adicionando conforme sobra espaço, do que começar com tudo o que cabe numa mala enorme e depois ter que tirar itens às pressas para caber numa mochila. Mobile-first segue essa mesma lógica: começar enxuto e melhorar progressivamente é, geralmente, mais simples do que começar rico e desmontar depois.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. O CSS base já é o "do celular" (compacto); a media query com min-width só melhora a experiência em telas maiores.
Na prática, mobile-first tende a gerar CSS mais enxuto: como a maioria dos smartphones compartilha características parecidas (telas estreitas), o CSS base cobre bem a maior parte dos casos comuns, e as media queries ficam reservadas para as poucas melhorias específicas de telas maiores, em vez do caminho inverso.
Mobile-first é a abordagem recomendada na maioria dos projetos novos, mas não é uma lei universal, existem projetos legados ou casos específicos que ainda usam desktop-first. O importante é entender a diferença entre min-width (mobile-first, "a partir desta largura") e max-width (desktop-first, "até esta largura") e ser consistente na escolha dentro de um mesmo projeto.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Inverta a lógica para mobile-first.