Veja quais media queries correspondem à sua tela agora, com atualização enquanto você redimensiona. Range syntax, prefers-color-scheme, reduced motion, hover e pointer, breakpoints e container queries.
Uma media query aplica CSS só quando uma condição sobre o dispositivo ou as configurações do usuário é verdadeira. @media (width >= 48rem) { ... } mira telas mais largas; prefers-color-scheme, prefers-reduced-motion, hover e pointer descrevem configurações e formas de entrada. Escreva primeiro os estilos para telas pequenas e depois adicione queries com min-width para os layouts maiores.
Queries mais usadas
O painel abaixo roda dezesseis queries com window.matchMedia no seu próprio navegador e se atualiza quando você redimensiona a janela, gira o celular ou troca para o modo escuro. Logo depois: a range syntax, as queries de preferência do usuário, as queries de entrada, os breakpoints dos frameworks e quando uma container query é a ferramenta melhor.
Uma forma mais curta de escrever condições de largura com operadores de comparação: (width >= 600px) em vez de (min-width: 600px), e (400px <= width < 900px) para uma faixa. Ela é suportada em todos os principais navegadores atuais; o Safari adicionou o suporte na versão 16.4, em 2023, então confira o caniuse se você atende dispositivos mais antigos.
Folhas de estilo mobile-first usam min-width: os estilos base atendem telas pequenas e cada query adiciona layout para as mais largas. Isso mantém o CSS de telas pequenas simples. max-width serve para pequenas exceções, mas misturar os dois no mesmo breakpoint pode deixar uma lacuna ou sobreposição de um pixel; a range syntax com < e >= evita isso.
Use @media (prefers-color-scheme: dark) e redefina as suas variáveis de cor dentro dela. No JavaScript, window.matchMedia('(prefers-color-scheme: dark)').matches dá a mesma resposta, e o evento change dele dispara quando o usuário troca.
Media queries olham para o viewport e o dispositivo. Container queries olham para o tamanho de um elemento pai marcado com container-type. Um card que deve mudar de layout quando a coluna dele é estreita, onde quer que seja colocado, pede uma container query.
Causas comuns: falta a meta tag viewport, então os celulares fingem ter cerca de 980px de largura; a query está acima da regra que deveria sobrescrever e perde pela ordem no código; ou falta um espaço ou um parêntese, o que invalida silenciosamente a condição inteira.
Valores da documentação oficial do Tailwind CSS v4 e do Bootstrap 5. Os do Tailwind estão em rem, mostrados aqui com o padrão de 16px.
Breakpoints padrão em dois frameworks populares (min-width, mobile first)
A range syntax se lê como matemática e facilita faixas sem sobreposição: < de um lado, >= do outro.
Pequenas adições que fazem um site parecer nativo em qualquer dispositivo.
O matchMedia retorna um objeto com matches e um evento change. É isso que o painel ao vivo desta página usa.
Como escolher entre elas
Os dois cards têm a mesma marcação. Só o largo tem espaço para mudar para um layout em linha. Edite as larguras para ver a mudança.
Variantes do Tailwind v4 e o CSS que elas geram
Largura
Mais estreito que o sm do Tailwind (640px com o tamanho de fonte padrão)
Largura
Entre o sm e o lg do Tailwind
Largura
lg do Tailwind para cima
Largura
Breakpoint clássico de tablet, sintaxe antiga
Orientação
Viewport mais alto que largo
Orientação
Viewport mais largo que alto
Entrada
A entrada principal consegue fazer hover (mouse, trackpad)
Entrada
A entrada principal é imprecisa (dedo)
Entrada
A entrada principal é precisa (mouse, caneta)
Entrada
Pelo menos uma entrada consegue fazer hover
Preferência
Sistema configurado no modo escuro
Preferência
O usuário pediu menos movimento
Preferência
O usuário pediu mais contraste
Tela
Tela de alta densidade, 2x ou mais
Tela
Rodando como web app instalado
Tela
Impressão ou pré-visualização de impressão
Copiar as correspondentes
Viewport: {size}. Redimensione a janela, gire o dispositivo ou troque o tema do sistema e a lista se atualiza.
medindo...
{w} x {h} px CSS, pixel ratio de {r}x
Resultados das media queries ao vivo
Grupo
Query
Corresponde quando
Agora
Sim
Não
n/a significa que este navegador não conseguiu interpretar a query, o que acontece com a range syntax em versões mais antigas. Precisa dos tamanhos exatos do dispositivo? Experimente a
ferramenta de resolução de tela
Comece grátis · Sem cartão de crédito