Como as media queries permitem o design responsivo?

Question

Accepted Answer

**Media queries** aplicam CSS condicionalmente com base nas características do dispositivo — mais frequentemente a **largura da viewport** — permitindo que uma única folha de estilo se adapte a telefones, tablets e desktops.

```css
/* base styles (mobile-first) */
.container { padding: 1rem; }

/* apply only when viewport is AT LEAST 768px wide */
@media (min-width: 768px) {
  .container { padding: 2rem; display: grid; grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .container { grid-template-columns: 1fr 1fr 1fr; }
}
```

## Por que isso importa

```css
/* ✅ mobile-first: base = mobile, layer on enhancements as it gets wider */
@media (min-width: 768px) { ... }

/* desktop-first: base = desktop, override down for smaller screens */
@media (max-width: 767px) { ... }
```

**Mobile-first** (`min-width`) é geralmente preferido: você escreve estilos básicos simples para telas pequenas e adiciona progressivamente complexidade para as maiores. Isso tende a produzir CSS mais limpo e leve, e corresponde a como o conteúdo é refluído.

## Outras consultas úteis

```css
@media (max-width: 600px) { }                 /* small screens */
@media (orientation: landscape) { }            /* device orientation */
@media (prefers-color-scheme: dark) { }        /* user wants dark mode */
@media (prefers-reduced-motion: reduce) { }    /* user dislikes animation — accessibility */
@media print { }                                /* print stylesheet */
```

`prefers-reduced-motion` e `prefers-color-scheme` respondem às *preferências* do usuário, não ao tamanho da tela — importante para acessibilidade e temas.

## Combinando condições

```css
@media (min-width: 768px) and (max-width: 1023px) { /* tablets only */ }
```

## Uma nota sobre o futuro: container queries

Media queries respondem à **viewport**; as mais recentes **container queries** (`@container`) respondem ao tamanho de um *elemento pai* — melhor para componentes verdadeiramente reutilizáveis. Eles complementam as media queries em vez de substituí-las.

## Por que isso importa

As media queries são a base do design responsivo — adaptando layout, espaçamento e colunas ao tamanho da tela.

A abordagem mobile-first `min-width` mantém o CSS gerenciável, e as consultas de preferência (`prefers-reduced-motion`, `prefers-color-scheme`) estendem a responsividade à acessibilidade e temas.