Media queries

Esta é o capítulo 38 de 52 do volume Aprenda a Web. O projeto-fio é a Oficina Costeira, um coletivo fictício de design em João Pessoa. O exemplo está em exemplos/38-media-queries/. Em cada capítulo: leia, copie, mude uma coisa, preveja, recarregue e confira.

O que você vai aprender

• Escrever @media com min-width depois da base estreita.
• Entender a cascata entre faixas.
• Agrupar a query junto do componente que ela muda.
• Ampliar a grade e o menu sem copiar o HTML.
• Preferir em ou rem na largura da query.
• Ajustar pelo conteúdo estranho, não por “iPhone X”.

A regra só vale se a condição passa

Media query envolve um bloco de CSS. Fora dela, a coluna estreita do capítulo 37 continua valendo.

h1 {
  font-size: 1.75rem;
}

@media (min-width: 40rem) {
  h1 {
    font-size: 2.25rem;
  }
}

Abaixo de 40rem o título fica em 1.75rem. A partir daí, 2.25rem. Não precisa desligar a regra pequena: a nova só cobre quando a janela cresce.

only screen é opcional hoje. screen and também. Este volume usa @media (min-width: …) direto, como o exemplo.

Copie. Mude 40rem para 20rem. Preveja o título grande mais cedo. Recarregue e arraste a borda da janela.

min-width e a cascata

Uma janela de 70rem passa em 40rem e em 64rem. As propriedades se acumulam. O que você não repetir na faixa maior continua da faixa anterior.

.cards {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 40rem) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

Na terceira faixa os cartões ficam em três colunas. O gap de 1rem permanece. Se na tela enorme você quiser gap maior, declare de novo.

Ordem no arquivo: do menor min-width para o maior. Se inverter, a faixa estreita pode vencer a larga na cascata e o layout “não obedece”.

Erro comum: base desktop e depois @media (max-width: 600px) desfazendo tudo. Mobile first usa min-width para acrescentar, não para desmontar.

Query ao lado do componente

Não junte todas as queries no fim do CSS. A navegação estreita e a navegação larga ficam juntas. Quem lê o arquivo entende o componente inteiro.

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

@media (min-width: 48rem) {
  .menu {
    justify-content: flex-end;
  }
}

A página com trilho:

.pagina {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .pagina {
    grid-template-columns: 12rem 1fr;
  }
}

É o padrão do exemplo 38-media-queries: uma coluna, depois barra lateral.

Quando abrir uma faixa

Olhe o conteúdo, não a lista de aparelhos. Linha grande demais. Menu que já cabe numa linha. Imagem perdida no vazio. Texto apertado. Aí nasce um ponto de interrupção.

Não crie uma query por marca de telefone. 40rem, 48rem e 64rem bastam para a Oficina. São medidas de conteúdo.

em e rem na query acompanham o tipo. Se a pessoa amplia a fonte, o layout “largo” chega mais tarde, o que costuma ser melhor do que um px travado.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Projetos — Oficina Costeira</title>
    <link rel="stylesheet" href="assets/stylesheets/main.css">
  </head>
  <body>
    <main class="wrap">
      <h1>Projetos</h1>
      <div class="cards">
        <article class="card"><h2>Identidade</h2><p>Marcas perto do mar.</p></article>
        <article class="card"><h2>Publicação</h2><p>Sites estáticos.</p></article>
        <article class="card"><h2>Oficina</h2><p>Encontros fictícios.</p></article>
      </div>
    </main>
  </body>
</html>

Mude os três cartões para dois. Preveja o buraco na faixa de três colunas. Recarregue. Ajuste a query ou aceite duas colunas no máximo.

Áreas e movimento

Você pode redesenhar grid-template-areas dentro da query, como no capítulo 28. O HTML da header, main e footer não muda. A ordem de Tab continua a do HTML, mesmo se a lateral “subir” no visual.

Animações ficam em prefers-reduced-motion: no-preference, outra media query, outro assunto. Não misture largura e movimento no mesmo bloco sem necessidade.

Impressão: @media print pode esconder o menu. Não é o foco deste volume. Largura da tela é.

Conferir arrastando a janela

Abra o exemplo. Arraste do estreito ao largo. Os cartões passam de um para dois para três. O trilho .pagina nasce em 48rem. Zoom 200%: as queries em rem reagem.

Teclado não deve perder o skip-link em nenhuma faixa. Contraste do cabeçalho permanece.

Sirva em 127.0.0.1. O emulador de dispositivo do navegador é atalho, não prova final.

prefers-reduced-motion e min-width podem coexistir no mesmo arquivo, em blocos separados. Não aninhe uma dentro da outra sem motivo: fica difícil de ler.

Impressão e hover: hover existem. O volume fecha na largura. Se o menu tiver display: none na faixa estreita, o teclado perde destinos — volte à capítulo 29.

Mude 64rem para 50rem na query dos três cartões. Preveja o salto mais cedo. Recarregue e arraste. Escolha o ponto em que a terceira coluna deixa de apertar o texto.

Atividades

1. A base mobile first usa min-width ou max-width para ampliar o layout?
2. Uma janela de 70rem aplica a regra de min-width: 40rem? Por quê?
3. Por que colocar a query da .menu logo após o CSS estreito da .menu?
4. O ponto de interrupção deve copiar a largura de um modelo de telefone?
5. grid-template-columns na query muda o HTML dos cartões?

Respostas comentadas

1. min-width. A tela pequena já está resolvida fora da query.
2. Sim. 70rem é maior que 40rem. A condição continua verdadeira. As propriedades se acumulam.
3. Quem mantém o CSS lê o componente inteiro. Não caça queries num bloco distante.
4. Não. Observe o conteúdo da Oficina: linha, menu, vazio. Use rem.
5. Não. Só a grade visual. A ordem no HTML e no teclado permanece.

Referências

• @media
• min-width
• Usando media queries

O arquivo completo

Referência do exemplo 38-media-queries, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}