# Range Syntax em Media Queries
> A sintaxe de intervalos (Range Syntax) em media queries é mais legível, fácil de depurar e bem suportada. Saiba por que vale substituir min-width e max-width.
URL: https://dpw.dev/css/css-range-syntax/
Publicado em: 2026-05-11
Categoria: css
Tags: web-design-responsivo
Autor: Tárcio Zemel
Media queries são a espinha dorsal do web design responsivo. São elas que controlam como um layout deve se ajustar conforme o tamanho da viewport. O problema é que a sintaxe com `min-width` e `max-width` pode confundir e, em alguns casos, gerar bugs de layout que consomem tempo para serem identificados.
Felizmente, agora temos uma alternativa mais legível e mais fácil de usar e depurar: a **Range Syntax** (ou Sintaxe de Intervalos).
> Artigo baseado em [Media Queries Range Syntax](https://ishadeed.com/article/range-syntax/).
## O problema com media queries
Imagine um padrão clássico de navegação: no mobile, apenas o logo e o botão de menu (toggle) aparecem; em telas maiores, a navegação fica visível e o toggle é escondido.
A seguir, as media queries usadas para isso:
```css
/* Esconde a navegação em tamanhos pequenos */
.nav {
@media (max-width: 300px) {
display: none;
}
}
/* Esconde o toggle em tamanhos grandes */
.toggle {
@media (min-width: 300px) {
display: none;
}
}
```
O problema acontece quando as duas media queries se encontram no mesmo valor de breakpoint (`300px`): _ambos elementos serão escondidos ao mesmo tempo_.
Vale lembrar:
- `max-width` equivale a `<=`
- `min-width` equivale a `>=`
Ao chegar exatamente em `300px`, tanto o menu quanto o botão somem ao mesmo tempo.
Essa é a confusão que aparece ao usar `min-width` e `max-width` apontando para o mesmo valor de breakpoint.
Quando o foco está só no que se está construindo, é fácil deixar esse detalhe passar e acabar 45 minutos debugando...
A frustração é real. Para resolver, é preciso usar dois valores diferentes:
- `max-width: 299px`: significa _menor ou igual a 299px_
- `min-width: 300px`: significa _maior ou igual a 300px_
```css
/* Esconde a navegação em tamanhos pequenos */
.nav {
@media (max-width: 299px) {
display: none;
}
}
/* Esconde o toggle em tamanhos grandes */
.toggle {
@media (min-width: 300px) {
display: none;
}
}
```
Assim, quando a viewport chega em `300px`, a navegação aparece e o toggle some. Sem sobreposição.
Para um caso isolado como esse, a solução funciona. Mas quando o projeto tem vários breakpoints, manter esses ajustes de `1px` começa a ficar trabalhoso.
## Conheça as media queries ranges
As **range media queries** (ou intevalos de media queries) resolvem esse problema sem precisar deslocar breakpoints manualmente.
Basta usar operadores de comparação para escrever a mesma regra de forma mais legível:
```css
/* Menor ou igual a 300px */
.nav {
@media (width <= 300px) {
display: none;
}
}
/* Maior que 300px */
.toggle {
@media (width > 300px) {
display: none;
}
}
```
Isso fica muito mais claro porque é possível ler os operadores e entender a lógica diretamente, sem ter que "decifrar" o que `min-` ou `max-` querem dizer.
Essa sintaxe faz parte do módulo Media Queries Level 4.
## Por que usar range media queries?
### Legibilidade
São mais fáceis de ler e entender. Ao bater o olho no CSS, dá para perceber o que a regra significa sem precisar adivinhar. E isso facilita muito a conferência e debug.
### Bem suportadas
O suporte dos principais navegadores tem status de Amplamente Disponível desde março de 2023.
### Facilita os intervalos
Quando o objetivo é limitar parte do design entre dois breakpoints, a sintaxe fica bem mais enxuta:
```css
/* Antes */
.section {
@media (min-width: 300px) and (max-width: 500px)
}
/* Depois */
.section {
@media (300px <= width <= 500px)
}
```
A leitura segue exatamente o sentido da regra: "largura entre 300px e 500px".
## Não é só para media queries
A sintaxe de intervalos também serve para container queries.
Basta trocar `@media` por `@container`:
```css
h1 {
@container (width >= 300px) {
color: #fff;
background-color: var(--brand-1);
}
@container (width >= 500px) {
background-color: hsl(from var(--brand-1) calc(h + 100) s l);
}
}
```
Veja o resultado:
## Conclusão
As **range media queries** são mais claras, mais fáceis de ler e de debugar e têm suporte sólido entre os principais navegadores.
O suporte é garantido e as vantagens que elas oferecem são muitas. Certamente, vale a pena começar a usá-las a partir do próximo projeto.
---
Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml