Nessa altura do campeonato, todo mundo já escreveu alguma media query na vida. A sintaxe parece simples. Taca um @media (min-width: 600px) lá e pronto. Mas alguns desafios começam a surgir no dia a dia. Um interessante é como negar uma media query, escrever seu inverso.

Pegue essa media query mesmo: @media (min-width: 600px). Ela seleciona telas com largura maior ou igual a 600 pixels. Simples. Agora quero escrever o inverso disso. Parece simples certo?

A primeira tentativa pode ser um @media (max-width: 600px). Faz sentido até. Mas aí lembramos que as media queries consideram seu valor inclusive. Isso quer dizer que quando a tela for exatamente 600px, ambas as media queries vão ser verdadeiras. Não é o que queremos.

Podemos pensar então em um ajuste e chegar a @media (max-width: 599px). Isso pega telas até 599 pixels inclusive. E a outra pegava de 600 pixels pra cima, inclusive. Pronto. Será? Não.

Isso só funcionaria se você imaginar que não existe valor entre 599 e 600, o que pode fazer sentido pensando em pixels físicos na tela (ou não, hoje temos subpixels). Mas o px no CSS é uma medida relativa diferente de um pixel físico - a gente chama de CSS pixel. E muita coisa afeta o tamanho de um CSS pixel, como por exemplo o zoom do usuário. Outro fator são as telas retina e seus device pixel ratios.

Resumindo: muita água pode rolar entre 599px e 600px na Web de hoje em dia. De volta a prancheta.

Lembramos então que as media queries têm uma keyword not. Parece fácil. Tentamos um @media not (min-width: 600px) e... bam, não funciona. Sintaxe inválida. Mas a ideia é essa mesmo, usar o not. A sintaxe final fica:

@media not all and (min-width: 600px) {}

/* negativa de @media (min-width: 600px){} */

Aqui é importante ressaltar o funcionamento do not. Ele nega a expressão inteira, por isso usei o all and. É como falar not(all and (min-width:600px)). O all é verdadeiro sempre então a lógica acaba ficando equivalente a not(min-width:600px), justo o que queríamos.