Gerador Media Query

Monte sua media query sem decorar a sintaxe: escolha um modelo pronto ou combine as condições que quiser, veja o código ser gerado na hora e confira se a regra vale para a tela em que você está agora. Redimensione a janela ou troque o tema do sistema para ver o teste mudar.

@media (min-width: 768px) {}

Como ler uma media query

Toda media query é formada por até três partes:

• Tipo de mídia (opcional): screen para telas, print para impressão ou all para todos. Quando omitido, vale para qualquer tipo.
• Condições (media features): características testadas entre parênteses, como (min-width: 768px) ou (prefers-color-scheme: dark).
• Operadores lógicos: and exige que todas as condições valham, a vírgula funciona como "ou" entre grupos e not inverte a regra inteira.

/* telas E com pelo menos 768px */
@media screen and (min-width: 768px) { }

/* menos de 600px OU orientação retrato */
@media (max-width: 599px), (orientation: portrait) { }

Sintaxe clássica ou moderna?

A sintaxe moderna (Media Queries Level 4) usa operadores de comparação, o que deixa intervalos bem mais legíveis. As duas formas abaixo são equivalentes, e a moderna já funciona em todos os navegadores atuais:

@media (min-width: 768px) and (max-width: 1023px) { }

@media (768px <= width <= 1023px) { }

Quer entender cada parte em detalhes? Veja o artigo Media Queries.