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:

/* 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 (>=, <=, >, <):

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):

/* ===================================================
   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%;
  }
}

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):

/* 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:

@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:

/* 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:

@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:

<!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.

O post Media Queries e Breakpoints Modernos no CSS | Web Academy apareceu primeiro em Web-Zoneware.

1. Os 3 Pilares do Design Responsivo (RWD)

O conceito formal de Design Responsivo repousa sobre três componentes fundamentais que devem operar em conjunto:

1. Grades Fluidas (Fluid Grids): A estrutura visual da página nunca utiliza larguras rígidas em pixels absolutos. Os contêineres e faixas são construídos com unidades relativas (fr, %, rem, vw) que se expandem e se contraem conforme a largura da janela de visualização.
2. Mídias Flexíveis (Flexible Media): Imagens, ilustrações SVG e vídeos incorporados devem ser elásticos, garantindo que nunca transbordem sua caixa pai:
   CSS3 6 linhas

   ⇄ Wrap 📋 Copiar Código

   /* Regra essencial de reset para mídias responsivas */
   img, video, iframe {
     max-width: 100%;
     height: auto;
     display: block;
   }
   

   /* Regra essencial de reset para mídias responsivas */ img, video, iframe { max-width: 100%; height: auto; display: block; }
3. Consultas de Mídia (Media Queries): Regras condicionais do CSS que detectam a largura, altura, resolução ou capacidades do dispositivo do usuário, adaptando o layout para oferecer a melhor experiência possível.

2. A Porta de Entrada: A Meta Tag Viewport

Antes de escrever qualquer linha de CSS responsivo, existe uma tag HTML obrigatória que deve estar presente dentro do <head> de toda página web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width: Ordena ao navegador que use a largura física real em pixels CSS do aparelho (ex.: 390px no iPhone, 412px no Galaxy).
• initial-scale=1.0: Define o zoom inicial como 100% natural, sem distorções ópticas.

3. Desktop-First vs. Mobile-First: O Duelo de Paradigmas

O Paradigma Legado: Desktop-First (Regressivo)

No modelo Desktop-First, o desenvolvedor escreve todo o CSS padrão pensando em um monitor de 1440px. Depois, adiciona blocos com @media (max-width: ...) para “desmanchar” o layout à medida que a tela diminui:

/* ABORDAGEM LEGADA DESKTOP-FIRST (EVITE!) */
.menu {
  display: flex;
  width: 1000px;
}
 
@media (max-width: 768px) {
  .menu {
    display: block;   /* Desfaz o flex */
    width: 100%;      /* Desfaz os 1000px */
  }
}

Essa abordagem é ineficiente porque os smartphones (que possuem conexões móveis mais lentas e processadores mais modestos) são penalizados com um arquivo CSS que declara estilos complexos apenas para sobrescrevê-los e anulá-los logo em seguida!

O Paradigma Moderno: Mobile-First (Progressivo)

No modelo Mobile-First, invertemos completamente o fluxo mental. Nós desenhamos o CSS padrão da página para a tela mais simples e restrita: a tela do smartphone:

• O CSS base (sem media queries) define uma única coluna limpa, fontes confortáveis para leitura e toques fáceis.
• Conforme a tela ganha espaço físico, usamos @media (min-width: ...) para enriquecer progressivamente o layout, adicionando colunas extras e efeitos mais elaborados.

/* ABORDAGEM MODERNA MOBILE-FIRST (PADRÃO DA INDÚSTRIA) */
 
/* 1. Base para Smartphones (Sem nenhuma media query!) */
.grade-produtos {
  display: grid;
  grid-template-columns: 1fr; /* Coluna única no celular */
  gap: 16px;
}
 
/* 2. Enriquecimento para Tablets e telas médias */
@media (min-width: 640px) {
  .grade-produtos {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas */
  }
}
 
/* 3. Enriquecimento para Desktops e telas amplas */
@media (min-width: 1024px) {
  .grade-produtos {
    grid-template-columns: repeat(4, 1fr); /* 4 colunas */
  }
}

4. Matriz Comparativa de Paradigmas

5. Breakpoints Orientados ao Conteúdo (Content-Driven)

Na prática corporativa, os intervalos mais consolidados do ecossistema moderno (inspirados no Tailwind e Bootstrap 5) são:

• Mobile (Base): < 640px (fluxo natural sem media queries).
• sm: min-width: 640px (smartphones em modo paisagem e pequenos tablets).
• md: min-width: 768px (tablets na vertical e iPads).
• lg: min-width: 1024px (notebooks e tablets na horizontal).
• xl: min-width: 1280px (monitores desktop padrão).

6. Ergonomia Tátil e Usabilidade Mobile (WCAG 2.2)

Telas de smartphones são operadas com os dedos polegares, não com o ponteiro microscópico de um mouse:

• Tamanho Mínimo de Toque: Todo botão, link de navegação ou elemento interativo deve ter uma área clicável de no mínimo 44×44px ou 48×48px (Critério 2.5.8 da WCAG 2.2).
• Fontes de Formulário ≥ 16px: Em campos de texto (<input>), mantenha o font-size com pelo menos 16px. Se a fonte for menor que 16px, navegadores como o Safari no iOS disparam um zoom automático incômodo que desorienta o usuário.

7. Laboratório Prático: Arquitetura Mobile-First em Ação

No código interativo abaixo, criamos um componente de notícias estruturado 100% sob a filosofia Mobile-First: observe como o CSS base é enxuto e como as media queries apenas adicionam complexidade conforme a tela cresce:

<!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 Mobile-First CSS</title>
  <style>
    /* 1. RESET E ESTILOS BASE (MOBILE POR PADRÃO) */
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0b0f19;
      color: #f8fafc;
      padding: 20px;
      margin: 0;
    }
 
    .noticias-feed {
      display: grid;
      grid-template-columns: 1fr; /* Coluna única para celulares */
      gap: 16px;
    }
 
    .card-noticia {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    }
 
    .card-noticia h4 {
      margin: 0 0 8px 0;
      color: #38bdf8;
      font-size: 1.1rem;
    }
 
    .card-noticia p {
      margin: 0 0 16px 0;
      color: #94a3b8;
      font-size: 0.9rem;
      line-height: 1.5;
    }
 
    /* Botão com área de toque ergonômica mínima de 44px */
    .btn-ler {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 0 20px;
      background: #2563eb;
      color: #fff;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      text-decoration: none;
      cursor: pointer;
    }
 
    /* 2. PROGRESSIVE ENHANCEMENT: TABLET (min-width: 640px) */
    @media (min-width: 640px) {
      .noticias-feed {
        grid-template-columns: repeat(2, 1fr); /* Expande para 2 colunas */
        gap: 20px;
      }
    }
 
    /* 3. PROGRESSIVE ENHANCEMENT: DESKTOP (min-width: 1024px) */
    @media (min-width: 1024px) {
      .noticias-feed {
        grid-template-columns: repeat(3, 1fr); /* Expande para 3 colunas */
      }
    }
  </style>
</head>
<body>
  <h2 style="color:#f1f5f9; margin-top:0;">Feed de Artigos Mobile-First</h2>
  <p style="color:#94a3b8; font-size:0.9rem; margin-bottom:24px;">
    Redimensione a largura da janela para ver o layout se expandir progressivamente de 1 para 2 e 3 colunas via <code>min-width</code>:
  </p>
 
  <div class="noticias-feed">
    <div class="card-noticia">
      <h4>A Evolução do CSS Grid</h4>
      <p>Como as grades bidimensionais nativas transformaram o desenvolvimento de portais corporativos modernos.</p>
      <a href="#" class="btn-ler">Ler Artigo →</a>
    </div>
 
    <div class="card-noticia">
      <h4>O Fim dos Hacks de Float</h4>
      <p>Entenda como display flow-root e Flexbox aposentaram definitivamente o clássico micro-clearfix.</p>
      <a href="#" class="btn-ler">Ler Artigo →</a>
    </div>
 
    <div class="card-noticia">
      <h4>Performance em Smartphones</h4>
      <p>Por que a abordagem Mobile-First acelera o tempo de renderização e melhora suas métricas de SEO.</p>
      <a href="#" class="btn-ler">Ler Artigo →</a>
    </div>
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste redimensionar a tela para observar a ampliação progressiva das colunas sem nenhum sobrescrita regressiva de propriedades:

⚡ Abrir no Playground IDE →

8. Resumo e Próximos Passos

• O Design Responsivo combina grades fluidas, mídias flexíveis e media queries.
• A meta tag <meta name="viewport" content="width=device-width, initial-scale=1.0"> é inegociável para desativar a tela virtual de 980px em smartphones.
• O paradigma Desktop-First usa max-width e “desmancha” o código de forma ineficiente no celular.
• O paradigma Mobile-First usa min-width, começando com o CSS base mais leve e enriquecendo progressivamente telas maiores.
• Breakpoints devem ser definidos com base nas necessidades do conteúdo, e nunca atrelados a marcas de celulares.
• Elementos táteis exigem no mínimo 44×44px de área de toque para conformidade com a acessibilidade (WCAG).

O post Design Responsivo e Mobile-First no CSS | Web Academy apareceu primeiro em Web-Zoneware.