Também disponível em: English · Español · Français · العربية
Gerador de media queries: breakpoints que não se sobrepõem
Gere breakpoints em quatro grafias e veja o intervalo exato que cada uma deixa descoberto.
O que é um breakpoint de media query?
Um breakpoint é a largura de janela em que um layout muda. No CSS você expressa isso com uma media query — quase sempre com um par delas, uma para o caso estreito e outra para o largo — e todo o design responsivo se apoia na ideia de que essas duas consultas dividem o eixo de larguras sem sobra nem falta.
Elas não dividem. O Media Queries nível 4 define os dois prefixos com exatidão: min- é o mesmo que o operador >= e max- é o mesmo que <=. Os dois incluem o valor que você escreveu. Então (max-width: 600px) e (min-width: 600px) são verdadeiras ao mesmo tempo em exatamente 600 pixels, e o navegador resolve isso aplicando a regra que vier depois — em silêncio, e de um jeito diferente conforme a ordem da sua folha de estilo.
Este gerador pega uma lista de breakpoints e escreve as consultas de quatro maneiras, mostrando em cada uma se a fronteira é exata, se sobrepõe ou se deixa um buraco — e, quando deixa, o intervalo preciso de larguras que não satisfaz nenhuma das duas.
Como usar
- Digite seus breakpoints separados por vírgulas ou espaços. Um número solto assume a unidade escolhida ao lado; escreva 40rem para trocá-la num valor específico. Os botões de exemplo carregam os breakpoints do Bootstrap, os do Tailwind e as duas grafias exatas.
- Escolha como a consulta abaixo do breakpoint deve ser escrita. Quatro opções: a sintaxe de intervalo, a forma negada, tirar 0,02 ou tirar uma unidade inteira. A tabela abaixo se atualiza com o que cada uma faz na fronteira, e a nota acima dela diz qual ferramenta real tomou essa decisão.
- Confira o último painel contra o seu próprio navegador. Ele entrega as consultas geradas ao matchMedia e mostra ao vivo o que a sua janela responde. Dê zoom e os números mudam: o zoom é o jeito mais fácil de conseguir uma largura fracionária, que é exatamente o caso que escapa de um breakpoint com folga.
Por que um breakpoint com folga não tem como estar certo
Como min- é >= e max- é <=, as duas consultas que alguém escreve em torno de um breakpoint são um par de semirretas fechadas. Duas semirretas fechadas não conseguem dividir uma reta. Ou compartilham a extremidade, e aí alguma largura satisfaz as duas, ou você as afasta, e aí um intervalo aberto entre elas não satisfaz nenhuma. Não existe um terceiro caso nem uma escolha de valores que escape disso.
A própria especificação diz isso, e é incomumente franca sobre o remendo. A nota dela observa que os autores deslocam os valores para que as duas consultas não sejam verdadeiras ao mesmo tempo, e em seguida aponta que juntar 320 com 321 “não leva em conta a possibilidade de larguras de janela fracionárias”, e descreve a versão melhorada com 320,01px como algo que “reduz significativamente a chance de a largura de um dispositivo escapar pela fresta”. Isso é uma probabilidade, nas palavras do próprio padrão, não uma correção.
As quatro estratégias daqui são as quatro respostas reais, e todo tamanho de buraco foi medido em um artefato publicado, não tirado da documentação. A folha de estilo do Bootstrap 5.3.3 junta (min-width: 576px) com (max-width: 575.98px): um buraco de 0,02px. O postcss-media-minmax, o conversor canônico da sintaxe de intervalo para os prefixos antigos, transforma (width < 600px) em (max-width: 599px) — um buraco de um pixel inteiro — e a folga dele nem é constante: dê 37.5rem e ele tira um milésimo em vez de uma unidade.
As duas grafias exatas, e no que diferem
A sintaxe de intervalo resolve isso de verdade, porque tem comparações estritas que faltam aos prefixos. (width < 600px) ao lado de (width >= 600px) cobre cada largura exatamente uma vez, inclusive a de 600. É o que o Tailwind v4 emite: a variante md: compila para (width >= 48rem) e a variante max-md: para (width < 48rem).
Existe uma segunda grafia exata, e ela é mais antiga que a primeira. Negar uma consulta inclusiva dá uma estrita: not all and (min-width: 600px) é verdadeira justamente quando a largura está abaixo de 600, e essa forma vale desde o Media Queries 3, então alcança navegadores que nunca aprenderam a sintaxe de intervalo. O otimizador do Tailwind reescreve as consultas de intervalo exatamente assim, e o Lightning CSS faz o mesmo — é por isso que o CSS compilado que circula parece usar os velhos prefixos inclusivos quando na verdade a consulta de baixo é uma negação.
As duas não são intercambiáveis, porém, e nenhum conversor menciona isso. A seção 2.4 da mesma especificação diz que uma característica que nomeia um conceito que o dispositivo não tem “deve sempre ser avaliada como falsa”. Um navegador de voz não tem largura, então lá (width < 600px) é falsa — enquanto not all and (min-width: 600px) nega um falso e sai verdadeira. Elas concordam em todo meio visual e discordam em todo o resto.
Limites honestos
O buraco que uma folga deixa é real, mas estreito, e numa tela em que toda largura de janela é um número inteiro de pixels CSS você nunca vai cair dentro dele. O que produz larguras fracionárias é o zoom do navegador, uma densidade de pixel que não é inteira e uma barra de rolagem que leva uma fração — por isso o painel ao vivo convida você a dar zoom em vez de afirmar com que frequência isso morde. Esta página não publica frequência nenhuma de propósito: o honesto é o intervalo exato e um jeito de você mesmo testar, não uma porcentagem cuja população eu teria de inventar.
A ferramenta também compara apenas as características width e height. Os prefixos valem para qualquer característica do tipo intervalo — resolution, aspect-ratio, color — e a aritmética é a mesma em todas, mas é na largura que a pergunta realmente aparece. Características discretas como pointer e orientation não aceitam prefixo, e a especificação diz isso sem rodeios.
Por fim, o CSS gerado é um esqueleto: dois blocos de media por breakpoint com uma regra vazia dentro. Ele existe para ser colado e preenchido, não para ser uma folha de estilo. E vale olhar antes a escada mobile-first logo abaixo: escrever só a consulta min- por breakpoint e deixar cada regra sobrepor a anterior contorna o problema inteiro, porque a segunda consulta nunca chega a ser escrita.
Por que é grátis?
É aritmética sobre um punhado de números mais o matchMedia do seu próprio navegador, e tudo acontece nesta aba enquanto você digita. Nenhum servidor entra na conta, então não há nada a medir nem conta a criar.
Nada é enviado. Os breakpoints que você digitar ficam na sua máquina.