Carregando...

Media queries CSS

O Design responsivo fixou a mentalidade: uma árvore HTML, viewport meta, casca fluida, unidades relativas. As media queries são o interruptor — blocos de CSS que só entram em ação quando uma condição coincide (em geral a largura do viewport). Esta lição ensina a sintaxe e hábitos calmos; Imagens responsivas e Breakpoints aprofundam o kit a seguir.

Caixa de ferramentas de media queries

📊 Media queries num relance

Peça Trabalho do dia a dia
@media Abre um bloco CSS condicional
Característica de mídia (min-width, max-width, …) O teste que o navegador avalia
and Exige que todas as características listadas coincidam
Consultas separadas por vírgula Lógica ou — qualquer lista que coincida aplica
Conjunto de regras dentro de { } Estilos que valem só enquanto a consulta coincide
Tipo de mídia (screen, print) Filtro opcional do meio de saída

Sem consultas, cada regra está «sempre ligada». Com elas, você mantém uma base sólida (da lição anterior) e empilha mudanças — colunas mais largas, tipo maior, outra navegação — só quando o viewport aguenta.

Anatomia de @media

Padrão clássico: característica entre parênteses, depois um bloco de chaves com declarações normais. Use rem ou em para larguras quando puder — escalam melhor com raiz/tipografia do que listas rígidas de pixels de aparelho.

Media query básica com min-width

css 
.nav {
display: block;
}

@media (min-width: 48rem) {
.nav {
display: flex;
gap: 1rem;
}
}

Mobile-first com min-width

Escreva o layout estreito na folha base. Use @media (min-width: …) para adicionar melhorias conforme o viewport cresce. Cada passo deve mudar uma camada clara — espaçamento, colunas ou navegação — não reescrever a página inteira a cada degrau.

Melhoria mobile-first

css 
.hero {
padding: 1rem;
font-size: 1.125rem;
}

@media (min-width: 40rem) {
.hero {
padding: 2rem;
font-size: 1.25rem;
}
}

@media (min-width: 64rem) {
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
}

Desktop-first com max-width

Se a base for um layout largo, @media (max-width: …) aperta estilos abaixo de um limiar — empilhar colunas, reduzir padding, simplificar chrome. Seja consistente no projeto: não salte sem motivo entre pilhas puras de min-width e max-width.

Aperto desktop-first

css 
.sidebar {
width: 16rem;
float: left;
}

@media (max-width: 50rem) {
.sidebar {
width: 100%;
float: none;
}
}

Combinar características com and

Encadeie características para que todas precisem coincidir. Útil para faixas (min e max juntos) ou para juntar largura a outra característica. Uma vírgula entre listas @media inteiras significa ou.

Faixa com and

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

@media (min-width: 40rem) and (max-width: 63.99rem) {
.card-grid {
grid-template-columns: 1fr 1fr;
}
}

Além da largura — impressão (e extras calmos)

A largura é a ferramenta do dia a dia. Tipos como print escondem chrome no papel. Preferências (por exemplo prefers-reduced-motion) são polimento de acessibilidade — use com parcimônia aqui; Breakpoints organiza a estratégia e Acessibilidade cobre movimento depois.

Estilos de impressão simples

css 
@media print {
.site-nav,
.ad-slot {
display: none;
}

body {
color: #000;
background: #fff;
}
}

Um hábito calmo de breakpoints

Escolha uma lista curta de larguras nomeadas que batem com seus pontos de tensão do layout — não com cada modelo de telefone. Documente-as (por exemplo «a nav recolhe abaixo de 48rem»). Prefira base fluida + poucas consultas a uma floresta de regras por aparelho. As próximas lições cobrem imagens e um plano de breakpoints mais completo.

Experimente você

  1. Pegue uma nav empilhada e adicione um @media (min-width: …) que a mude para flex.
  2. Reescreva a mesma ideia com aperto desktop-first em max-width — note a diferença nos estilos base.
  3. Adicione uma consulta de faixa com min-width e max-width só para uma faixa de duas colunas.
  4. Esconda um banner decorativo com @media print.
  5. Escreva três breakpoints nomeados para sua página de prática — mantenha a lista curta.

Erros comuns

  • Uma consulta separada por marca de aparelho em vez de pontos de tensão do layout
  • Esquecer o } de fecho e o CSS seguinte sumir dentro da consulta
  • Misturar pilhas min-width e max-width ao acaso até a cascade brigar consigo mesma
  • Confiar só em consultas e ignorar contentores fluidos e unidades relativas do Design responsivo
  • Despejar aqui um catálogo longo de breakpoints — esse ofício continua em Breakpoints; imagens em Imagens responsivas

Resumo

  • Media queries envolvem CSS para aplicar só quando as condições coincidem
  • min-width melhora para cima (mobile-first); max-width aperta para baixo (desktop-first)
  • and exige todas as características; vírgulas entre consultas atuam como ou
  • Poucos breakpoints nomeados ligados a necessidades reais de layout
  • Seguinte: Imagens responsivas — mídia que escala sem partir a coluna

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 55 de 62
Css Tutorial