Lição 37 de 50

Media Queries e Breakpoints Modernos no CSS | Web Academy

Na lição anterior, estabelecemos a filosofia Mobile-First como o alicerce da web moderna. Agora, é hora de dominar o motor que torna essa adaptação tecnicamente viável: as Media Queries (Consultas de Mídia). Com a regra @media, seu código CSS ganha a capacidade de interrogar ativamente o dispositivo do usuário: “A tela possui mais de 768px de largura? O usuário está usando mouse ou tela de toque? O sistema operacional está configurado em Modo Escuro? O usuário solicitou redução de animações por labirintite?”. Nesta lição, você aprenderá a revolucionária Sintaxe de Faixa (Range Syntax), a definição estratégica de breakpoints e os recursos de acessibilidade do CSS moderno.

📑 Índice do Conteúdo

1. Anatomia Fundamental de uma Media Query

Uma consulta de mídia é composta por um Tipo de Mídia (Media Type) opcional e uma ou mais Expressões de Recursos (Media Features) combinadas por operadores lógicos:

CSS3 4 linhas

/* Sintaxe Geral: @media [tipo] and (recurso: valor) */
@media screen and (min-width: 768px) {
  /* Regras aplicadas apenas em telas com largura mínima de 768px */
}

/* Sintaxe Geral: @media [tipo] and (recurso: valor) */
@media screen and (min-width: 768px) {
/* Regras aplicadas apenas em telas com largura mínima de 768px */
}

Tipos de Mídia (Media Types)

all: Valor padrão. Aplica a regra a todas as categorias de dispositivos.
screen: Destinado exclusivamente a telas digitais (computadores, tablets, smartphones).
print: Ativado quando a página é enviada para a impressora ou visualizada na janela de impressão do navegador (Ctrl+P / Cmd+P).
speech: Voltado para sintetizadores de voz e leitores de tela especializados.

Operadores Lógicos

and: Exige que todas as condições encadeadas sejam verdadeiras.
not: Inverte o resultado da consulta inteira.
Vírgula (,): Funciona como o operador lógico OU (OR). Se qualquer uma das condições separadas por vírgula for atendida, as regras são executadas.

2. A Revolução: Sintaxe de Faixa (Range Syntax do Media Queries Level 4)

Por mais de uma década, expressar intervalos de tela no CSS exigia fórmulas verbosas e pouco intuitivas com pares de min-width e max-width.

A especificação Media Queries Level 4 simplificou radicalmente esse processo introduzindo operadores matemáticos universais (>=, <=, >, <):

Objetivo de Design	Sintaxe Legada (Prolixa)	Sintaxe Moderna de Faixa (Recomendada)
Telas a partir de 768px	`@media (min-width: 768px)`	`@media (width >= 768px)`
Telas abaixo de 640px	`@media (max-width: 639px)`	`@media (width < 640px)`
Intervalo exclusivo entre 768px e 1024px	`@media (min-width: 768px) and (max-width: 1024px)`	`@media (768px <= width <= 1024px)`

Suporte Universal: A sintaxe de faixa matemática é suportada por 100% dos navegadores modernos desde 2023. Ela torna seu arquivo de estilos infinitamente mais legível e autoexplicativo!

3. Arquitetura de Breakpoints Corporativos

Seguindo o paradigma Mobile-First estabelecido na Lição 36, estruturamos os pontos de quebra em ordem crescente de largura utilizando em (ou px):

CSS3 34 linhas

/* ===================================================
   1. BASE MOBILE: Estilos universais sem media queries
   =================================================== */
.cartao-plano {
  width: 100%;
}
 
/* ===================================================
   2. TABLET PEQUENO / PAISAGEM (sm: >= 640px / 40em)
   =================================================== */
@media (width >= 40em) {
  .cartao-plano {
    width: 50%;
  }
}
 
/* ===================================================
   3. TABLET VERTICAL / DESKTOP MÉDIO (md: >= 768px / 48em)
   =================================================== */
@media (width >= 48em) {
  .grade-principal {
    display: grid;
    grid-template-columns: 260px 1fr;
  }
}
 
/* ===================================================
   4. NOTEBOOKS E TELAS LARGAS (lg: >= 1024px / 64em)
   =================================================== */
@media (width >= 64em) {
  .cartao-plano {
    width: 33.333%;
  }
}

/* ===================================================
1. BASE MOBILE: Estilos universais sem media queries
=================================================== */
.cartao-plano {
width: 100%;
}
/* ===================================================
2. TABLET PEQUENO / PAISAGEM (sm: >= 640px / 40em)
=================================================== */
@media (width >= 40em) {
.cartao-plano {
width: 50%;
}
}
/* ===================================================
3. TABLET VERTICAL / DESKTOP MÉDIO (md: >= 768px / 48em)
=================================================== */
@media (width >= 48em) {
.grade-principal {
display: grid;
grid-template-columns: 260px 1fr;
}
}
/* ===================================================
4. NOTEBOOKS E TELAS LARGAS (lg: >= 1024px / 64em)
=================================================== */
@media (width >= 64em) {
.cartao-plano {
width: 33.333%;
}
}

Por que Usar em em Breakpoints em Vez de px? Se um usuário com deficiência visual aumentar o tamanho de fonte padrão do navegador de 16px para 24px (zoom tipográfico de acessibilidade), as media queries escritas em px podem manter o site preso no modo desktop, esmagando os textos ampliados. Consultas escritas em em reagem proporcionalmente à escala da fonte do usuário, garantindo uma experiência inclusiva impecável!

4. Media Queries de Preferência do Usuário (Acessibilidade e Ergonomia)

As Media Queries modernas vão muito além do tamanho da tela. Elas permitem que o seu site respeite as preferências do sistema operacional do visitante:

1. Modo Escuro Nativo: `prefers-color-scheme`

Detecta se o sistema operacional do usuário está configurado para o tema escuro (Dark Mode):

CSS3 13 linhas

/* Tema Claro padrão */
:root {
  --bg-pagina: #ffffff;
  --cor-texto: #0f172a;
}
 
/* Ativação automática de Tema Escuro */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-pagina: #0b0f19;
    --cor-texto: #f8fafc;
  }
}

/* Tema Claro padrão */
:root {
--bg-pagina: #ffffff;
--cor-texto: #0f172a;
}
/* Ativação automática de Tema Escuro */
@media (prefers-color-scheme: dark) {
:root {
--bg-pagina: #0b0f19;
--cor-texto: #f8fafc;
}
}

2. Proteção contra Distúrbios Vestibulares: `prefers-reduced-motion`

Pessoas com labirintite, epilepsia ou distúrbios de equilíbrio desativam animações bruscas no sistema operacional. É um requisito essencial da WCAG 2.2 respeitar essa escolha:

CSS3 8 linhas

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}

3. Detecção de Mouse vs. Touchscreen: `hover` e `pointer`

Em smartphones, passar o dedo sobre um botão dispara o estado :hover e faz com que ele fique “preso” visualmente mesmo depois que o usuário tira o dedo da tela. Podemos restringir efeitos de hover apenas para mouses reais:

CSS3 7 linhas

/* Aplica efeito de hover apenas se o dispositivo tiver um mouse real */
@media (hover: hover) and (pointer: fine) {
  .btn-interativo:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  }
}

/* Aplica efeito de hover apenas se o dispositivo tiver um mouse real */
@media (hover: hover) and (pointer: fine) {
.btn-interativo:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
}

5. Estilizando para Impressão: `@media print`

Quando o usuário precisa imprimir um artigo ou recibo do site, o papel exige uma diagramação completamente diferente da tela:

CSS3 12 linhas

@media print {
  /* Oculta barras de navegação, botões e vídeos no papel */
  nav, footer, .sidebar, .btn-acao {
    display: none !important;
  }
 
  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
  }
}

@media print {
/* Oculta barras de navegação, botões e vídeos no papel */
nav, footer, .sidebar, .btn-acao {
display: none !important;
}
body {
background: #fff !important;
color: #000 !important;
font-size: 12pt;
}
}

6. Laboratório Prático: Media Queries Modernas em Ação

No código interativo abaixo, combinamos a sintaxe de faixa matemática (width >= 680px), suporte automático ao Dark Mode e o respeito ao prefers-reduced-motion:

HTML5 95 linhas

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Laboratório de Media Queries Modernas</title>
  <style>
    :root {
      --bg: #f8fafc;
      --card-bg: #ffffff;
      --text: #0f172a;
      --border: #e2e8f0;
      --accent: #2563eb;
    }
 
    /* 1. DETECÇÃO DE MODO ESCURO AUTOMÁTICO */
    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0b0f19;
        --card-bg: #1e293b;
        --text: #f8fafc;
        --border: #334155;
        --accent: #38bdf8;
      }
    }
 
    body {
      background-color: var(--bg);
      color: var(--text);
      font-family: 'Inter', system-ui, sans-serif;
      padding: 30px;
      margin: 0;
      transition: background-color 0.3s ease, color 0.3s ease;
    }
 
    /* 2. BASE MOBILE (COLUNA ÚNICA) */
    .container-planos {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
 
    .card {
      background: var(--card-bg);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 24px;
      transition: transform 0.2s ease;
    }
 
    .card h3 { margin: 0 0 8px 0; color: var(--accent); }
 
    /* 3. SINTAXE DE FAIXA MATEMÁTICA: width >= 680px */
    @media (width >= 680px) {
      .container-planos {
        grid-template-columns: 1fr 1fr; /* 2 colunas */
        gap: 24px;
      }
    }
 
    /* 4. HOVER APENAS EM MOUSES REAIS */
    @media (hover: hover) and (pointer: fine) {
      .card:hover {
        transform: translateY(-4px);
      }
    }
 
    /* 5. ACESSIBILIDADE VESTIBULAR */
    @media (prefers-reduced-motion: reduce) {
      body, .card {
        transition: none !important;
        transform: none !important;
      }
    }
  </style>
</head>
<body>
  <h2 style="margin-top:0;">Media Queries Inteligentes Level 4</h2>
  <p style="color:#64748b; font-size:0.9rem; margin-bottom:24px;">
    Este laboratório adapta-se à largura da tela com a sintaxe <code>width >= 680px</code> e altera suas cores automaticamente com base no Modo Escuro do seu sistema!
  </p>
 
  <div class="container-planos">
    <div class="card">
      <h3>Web Academy Pro</h3>
      <p>Acesso a todos os cursos com laboratórios interativos em tempo real.</p>
    </div>
 
    <div class="card">
      <h3>Dev Studio Enterprise</h3>
      <p>Suporte prioritário e ferramentas de engenharia de alta performance.</p>
    </div>
  </div>
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Laboratório de Media Queries Modernas</title>
<style>
:root {
--bg: #f8fafc;
--card-bg: #ffffff;
--text: #0f172a;
--border: #e2e8f0;
--accent: #2563eb;
}
/* 1. DETECÇÃO DE MODO ESCURO AUTOMÁTICO */
@media (prefers-color-scheme: dark) {
:root {
--bg: #0b0f19;
--card-bg: #1e293b;
--text: #f8fafc;
--border: #334155;
--accent: #38bdf8;
}
}
body {
background-color: var(--bg);
color: var(--text);
font-family: 'Inter', system-ui, sans-serif;
padding: 30px;
margin: 0;
transition: background-color 0.3s ease, color 0.3s ease;
}
/* 2. BASE MOBILE (COLUNA ÚNICA) */
.container-planos {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
.card {
background: var(--card-bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
transition: transform 0.2s ease;
}
.card h3 { margin: 0 0 8px 0; color: var(--accent); }
/* 3. SINTAXE DE FAIXA MATEMÁTICA: width >= 680px */
@media (width >= 680px) {
.container-planos {
grid-template-columns: 1fr 1fr; /* 2 colunas */
gap: 24px;
}
}
/* 4. HOVER APENAS EM MOUSES REAIS */
@media (hover: hover) and (pointer: fine) {
.card:hover {
transform: translateY(-4px);
}
}
/* 5. ACESSIBILIDADE VESTIBULAR */
@media (prefers-reduced-motion: reduce) {
body, .card {
transition: none !important;
transform: none !important;
}
}
</style>
</head>
<body>
<h2 style="margin-top:0;">Media Queries Inteligentes Level 4</h2>
<p style="color:#64748b; font-size:0.9rem; margin-bottom:24px;">
Este laboratório adapta-se à largura da tela com a sintaxe <code>width >= 680px</code> e altera suas cores automaticamente com base no Modo Escuro do seu sistema!
</p>
<div class="container-planos">
<div class="card">
<h3>Web Academy Pro</h3>
<p>Acesso a todos os cursos com laboratórios interativos em tempo real.</p>
</div>
<div class="card">
<h3>Dev Studio Enterprise</h3>
<p>Suporte prioritário e ferramentas de engenharia de alta performance.</p>
</div>
</div>
</body>
</html>

Abra este laboratório no Playground IDE e teste redimensionar o painel para comprovar a sintaxe de faixa em ação:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

Media Queries adaptam o CSS com base no tipo de dispositivo e recursos de tela.
A Sintaxe de Faixa (Range Syntax) substitui min-width por operadores matemáticos elegantes como width >= 768px ou 768px <= width <= 1024px.
Breakpoints devem ser ordenados de forma crescente (Mobile-First) e usar preferencialmente unidades em para respeitar o zoom de acessibilidade do usuário.
prefers-color-scheme: dark detecta o Modo Escuro do sistema operacional sem necessidade de JavaScript.
prefers-reduced-motion: reduce é mandatório para proteger usuários com distúrbios vestibulares contra animações bruscas.
@media (hover: hover) restringe efeitos de ponteiro exclusivamente a mouses reais, eliminando bugs visuais no toque móvel.

Próximo Passo: Um dos maiores desafios da responsividade é lidar com fotos e gráficos de proporções diferentes. Como garantir que uma imagem preencha um cartão sem achatar, distorcer ou transbordar? Na Lição 38, desvendaremos Imagens Responsivas, object-fit & aspect-ratio!