Media queries
Um layout perfeito no computador pode ficar completamente quebrado num celular. Media queries permitem que o CSS mude de comportamento conforme o tamanho da tela.
Estudar esta lição interativa →Mais da metade do tráfego da web hoje vem de celulares, e um layout desenhado só pensando num monitor grande costuma quebrar feio numa tela estreita: texto minúsculo, colunas espremidas, botões difíceis de tocar. A media query resolve isso: um bloco de CSS que só se aplica quando uma condição sobre a tela é verdadeira, como "largura máxima de 480px".
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. @media (max-width: 480px) só se aplica quando a tela é estreita. A prévia acompanha a largura da coluna da lição: estreite a janela do navegador (ou abra no celular) até a prévia ficar com menos de 480px para ver a regra entrar em ação.
Um exemplo de produto real: o menu de praticamente todo site vira um "menu hambúrguer" (ícone de três linhas que abre uma lista) abaixo de uma certa largura de tela, e volta a mostrar todos os links lado a lado acima dela. Essa troca de comportamento inteira é decidida por uma media query, olhando a largura disponível.
Uma media query olha a largura da área onde o CSS está rodando. Nas células deste curso, essa área é a prévia, que ocupa a largura da coluna da lição. Num monitor largo a prévia passa de 480px e a regra de max-width: 480px fica desligada; ela só liga quando a prévia fica estreita. Há dois jeitos de testar: estreitar a janela do navegador até a coluna ficar com menos de 480px, ou abrir as ferramentas do desenvolvedor (F12) e ligar o modo dispositivo (no Chrome, Edge e Firefox: Ctrl+Shift+M), que simula a tela de um celular e deixa escolher a largura.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Adicione a media query.