Aula de Desenvolvimento Web · CSS

Media Queries: um layout para cada tela

Sem complicação: esta página mostra, ao vivo, como o CSS muda o desenho da tela conforme o aparelho — e o que acontece quando esse CSS deixa de ser aplicado.

HTML5 semântico
CSS Grid + Flexbox
JavaScript vanilla
Glassmorphism

Toque no botão flutuante no canto da tela para desligar o CSS responsivo e ver na hora a diferença entre um layout adaptado ao celular e um layout desktop “espremido” na tela pequena.

01 · Conceito

O que é `@media`?

Uma media query é um bloco de estilos condicional no CSS: ele só é aplicado quando a condição do dispositivo é verdadeira. A forma mais comum é comparar a largura da janela com um valor, como em max-width: 768px — ou seja, “aplique apenas em telas de até 768 pixels de largura”.

Assim o navegador “pergunta” o tamanho da tela e entrega o layout adequado: grids viram coluna única, fontes e margens diminuem, o menu se reorganiza e os alvos de toque ficam maiores.

Analogia: o @media é o “SE… ENTÃO” do CSS. SE a tela tiver até 768px de largura, ENTÃO aplique os estilos de dentro das chaves. Fora dessa condição o navegador nem lê aquele bloco — é como levar guarda-chuva só quando está chovendo.

max-width: 768px “No máximo 768px” → vale do zero até 768px: celulares e tablets em pé.
min-width: 769px “No mínimo 769px” → vale daqui para cima: notebooks e monitores.
orientation / pointer Outras perguntas: a tela está deitada ou em pé? O dedo está tocando ou é mouse?

Nesta página, o layout base (desktop) foi construído FORA das media queries — ou seja, ele vale sempre. As adaptações para celular ficam dentro de blocos @media que só são considerados enquanto o <body> tem a classe .responsive-active. Pense nessa classe como um interruptor de luz: o botão da tela liga (adiciona a classe) e desliga (remove a classe).


.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}


@media (max-width: 768px) {
  body.responsive-active .card-grid {
    grid-template-columns: 1fr;
    
  }
}

Tradução linha a linha

@media (max-width: 768px) { → “Quando a tela tiver até 768px, liga o bloco de baixo.”
body.responsive-active .card-grid { → “…e só se o <body> estiver com a classe .responsive-active.”
grid-template-columns: 1fr; → “Então o grid passa a ter 1 coluna só e as caixas empilham.”

02 · Glossário

Os termos, em português claro

Um dicionário para a turma inteira acompanhar: cada palavra técnica com uma explicação simples e uma analogia do dia a dia.

Responsividade (RWD)

É a mesma página se reorganizando sozinha conforme o aparelho: no celular ela vira coluna única, no desktop ela abre em várias colunas.

No dia a dia Uma mesa extensível: pequena para o cotidiano, cresce quando chega gente.
Viewport

A área da página que você enxerga agora dentro da janela do navegador ou da tela do celular. No celular, a viewport tem a largura da tela (ex.: 390px).

No dia a dia A janela do ônibus: o mundo continua lá fora, mas você vê só o que cabe na janela.
Media Query @media

Um “SE” do CSS: um bloco de estilos que só entra em ação quando a condição da tela é verdadeira (por exemplo, “largura até 768px”).

No dia a dia SE chover, ENTÃO levo guarda-chuva. Sem chuva, o guarda-chuva fica em casa.
Breakpoint (ponto de quebra)

O valor de largura escolhido para o layout mudar de forma. Aqui usamos 1024px, 860px, 768px e 480px.

No dia a dia O momento em que a fila precisa virar duas colunas para caber na porta.
max-width / min-width

max-width: 768px significa “até 768px”; min-width: 769px significa “a partir de 769px”. Eles dizem até onde a pergunta do CSS vale.

No dia a dia Tamanho de roupa: “até o M” ou “a partir do G”.
px e rem

px = pixel, medida fixa na tela. rem = “quantas vezes a fonte padrão do navegador” (1rem = 16px no padrão). Com rem, tudo cresce ou encolhe junto.

No dia a dia px é o centímetro fixo da régua; rem é a medida que acompanha quem aumenta a letra no celular.
display: grid

Divide a área em linhas e colunas — como uma planilha — e encaixa os itens dentro das caixas. O .card-grid é uma grade de 4 colunas.

No dia a dia A moldura de um quebra-cabeça: você define quantas colunas ela tem.
display: flex

Alinha os itens em uma única direção (linha ou coluna) e reparte o espaço que sobra entre eles. Ideal para menus, botões e listas.

No dia a dia A fila do refeitório: todo mundo na mesma direção, com espaçamento igual.
Classe no <body>

Uma etiqueta que colocamos ou tiramos para ligar/desligar um grupo de regras. Aqui, .responsive-active é a condição para as media queries valerem.

No dia a dia O interruptor da lâmpada: sem a classe, a lâmpada do CSS responsivo fica apagada.
Overflow (transbordamento)

Acontece quando o conteúdo é mais largo que a tela: ele escapa para fora, aparece barra de rolagem lateral e o layout parece “quebrado”.

No dia a dia Texto escrito em papel largo demais para o envelope: sempre sobra para fora.
Especificidade

Se duas regras brigam pelo mesmo elemento, vence a mais detalhada. body.responsive-active .card-grid (3 partes) ganha de .card-grid (1 parte) — por isso não precisamos de !important.

No dia a dia Quanto mais detalhes na ordem de serviço, mais autoridade ela tem.
Mobile first

Estratégia de programar primeiro a versão do celular e crescer com min-width. Aqui fizemos o contrário (desktop primeiro) de propósito, para mostrar o que acontece quando falta responsivo.

No dia a dia Construir a casa pensando no terreno pequeno e só depois acrescentar cômodos.

03 · Conteúdo

Grid de cards

Quatro caixas lado a lado no desktop. No celular, o CSS responsivo empilha as caixas em uma coluna só. Com o responsivo desligado, o navegador continua tentando enfiar 4 colunas numa tela de celular — e é aí que a página “quebra”.

Performance

Página leve: código enxuto e imagens otimizadas, para abrir rápido mesmo em rede 3G.

Carregamento rápido

Design System

Um combinado de cores, espaçamentos e fontes, reaproveitado em todos os blocos da tela.

Padronização

Mobile First

Pense primeiro no celular e acrescente colunas aos poucos, usando min-width.

Estratégia

Acessibilidade

Texto com bom contraste, foco visível no teclado e botões grandes para o dedo (mín. 44px).

Para todas as pessoas

04 · Prática

4 passos para ver a quebra

Faça junto com a turma — dá menos de um minuto.

01
Abra pelo celular

Peça para alguém abrir este endereço no navegador do celular. O layout já nasce em coluna única.
02
Toque no botão

Ele tira a classe .responsive-active do <body> — é como apagar o interruptor do CSS responsivo.
03
Veja o que acontece

O navegador continua recebendo o CSS de desktop: 4 colunas e fontes grandes numa tela estreita. O conteúdo transborda e surge rolagem lateral.
04
Toque de novo

A classe volta para o <body>, as media queries voltam a valer e o layout se reorganiza sozinho.

Media Queries: um layout para cada tela

Responsividade (RWD)

Viewport

Media Query @media

Breakpoint (ponto de quebra)

max-width / min-width

px e rem

display: grid

display: flex

Classe no <body>

Overflow (transbordamento)

Especificidade

Mobile first

Performance

Design System

Mobile First

Acessibilidade

Abra pelo celular

Toque no botão

Veja o que acontece

Toque de novo

Classe no `<body>`