O que é uma media query?
Uma media query aplica um bloco de CSS somente quando uma condição sobre o viewport é cumprida (normalmente, sua largura). É a ferramenta que faz o design mudar conforme o tamanho da tela.
@media (min-width: 768px) {
.galeria {
flex-direction: row; /* em telas >= 768px, em linha */
}
}
Leia literalmente: «a partir de 768 px de largura, a galeria fica em linha». Abaixo dessa largura, o estilo base continua valendo (a coluna).
Breakpoints típicos
Um breakpoint é a largura na qual o design muda. Não há valores sagrados, mas estes são comuns:
@media (min-width: 640px) { /* celular grande / tablet vertical */ }
@media (min-width: 768px) { /* tablet */ }
@media (min-width: 1024px) { /* notebook */ }
@media (min-width: 1280px) { /* desktop amplo */ }
Dica de especialista: escolha os breakpoints conforme onde seu conteúdo quebra, não conforme modelos concretos de dispositivo. Redimensione a janela e, quando o design começar a ficar ruim, é ali que você coloca o breakpoint.
Por que min-width se encaixa com mobile-first
Com mobile-first usamos min-width (do pequeno para o grande):
- O estilo base (fora das media queries) é o do celular.
- Cada
@media (min-width: ...)adiciona melhorias conforme há mais espaço. - As regras se acumulam da menor para a maior largura, em ordem crescente.
A abordagem oposta, max-width (do grande para o pequeno), é desktop-first:
você começa pelo desktop e vai recortando. Funciona, mas costuma acabar em mais
código e mais exceções. Para a maioria dos projetos, mobile-first +
min-width é a opção recomendada.