O CSS que você conhecia mudou. Por anos, a responsividade foi sinônimo de media queries — aquelas regras que observam a largura da tela e reorganizam tudo. Funciona. Mas tem um limite: a tela do dispositivo não é a única medida que importa.
Um card dentro de uma sidebar estreita e o mesmo card dentro de um conteúdo largo vivem realidades diferentes. A viewport não sabe disso. O elemento pai sabe.
É aí que entram as container queries, uma das adições mais aguardadas do CSS. Com elas, o componente responde ao tamanho do contêiner onde está inserido, não ao viewport. Simples no conceito, revolucionário na prática.
Neste artigo, vamos comparar container queries vs media queries em cinco pontos essenciais. Você vai entender quando cada uma faz sentido, como combiná-las e, principalmente, como evitar os erros comuns de quem está migrando. Se você trabalha com front-end, essa leitura pode mudar a forma como você estrutura seus estilos.
O que são container queries e como elas mudam o jogo
Imagine que você desenvolveu um card de produto perfeito. Ele funciona bem em uma grade de quatro colunas. Agora, o mesmo card precisa ser usado em uma sidebar de 200px. Com media queries, você teria que criar classes específicas ou aceitar o resultado quebrado.
Container queries resolvem isso de forma elegante. Você define um elemento como contêiner e, dentro dele, aplica estilos baseados no tamanho disponível. O card se adapta sozinho, independente do viewport.
A sintaxe é simples: use a propriedade container-type para criar um contêiner e, depois, a regra @container para aplicar estilos condicionais. Veja um exemplo básico:
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex;
}
}
Nesse código, quando o contêiner do card tiver mais de 400px, o card vira um flex container. Quando for menor, ele permanece empilhado. Nenhuma media query envolvida.
Essa abordagem é especialmente útil em design systems e bibliotecas de componentes. Você cria um componente uma vez e ele se comporta bem em qualquer contexto. O resultado é um código mais modular, previsível e fácil de manter.
Mas não se engane: container queries não substituem as media queries. Elas resolvem problemas diferentes. E é exatamente isso que vamos explorar a seguir.
Container queries vs media queries: 5 diferenças que você precisa conhecer
Para tomar a decisão certa, é preciso entender as diferenças fundamentais entre as duas abordagens. Aqui estão as cinco principais:
- O que elas medem: Media queries medem o viewport (a janela do navegador). Container queries medem o tamanho do elemento contêiner.
- Escopo de aplicação: Media queries afetam o layout global da página. Container queries afetam apenas os elementos dentro do contêiner definido.
- Reutilização de componentes: Com media queries, um componente precisa de ajustes externos para funcionar em diferentes contextos. Com container queries, o componente se adapta sozinho.
- Performance e manutenção: Container queries podem reduzir a necessidade de múltiplas media queries e classes condicionais, tornando o CSS mais limpo. Media queries são mais amplamente suportadas e testadas.
- Suporte dos navegadores: Media queries são suportadas em todos os navegadores há anos. Container queries ainda estão em adoção, com suporte parcial no Firefox.
Vamos aprofundar cada uma dessas diferenças para que você saiba exatamente quando usar cada técnica.
1. O que elas medem: viewport vs contêiner
Media queries observam o tamanho da viewport. Se a tela tem 768px, você aplica certos estilos. Se tem 1024px, aplica outros. É um conceito global.
Container queries, por outro lado, observam o tamanho do contêiner. O mesmo componente pode se comportar de maneiras diferentes dependendo do espaço que recebe. Isso é especialmente útil em layouts complexos, como dashboards ou grids assimétricas.
2. Escopo de aplicação
Media queries são ótimas para mudanças estruturais, como alterar a navegação de horizontal para vertical em telas pequenas. Elas afetam a página inteira ou grandes seções.
Container queries são ideais para componentes isolados. Um botão, um card, uma tabela — qualquer elemento que precise se adaptar ao seu contexto imediato. Elas não interferem no restante da página.
3. Reutilização de componentes
Esse é o ponto que mais empolga os desenvolvedores. Com media queries, se você quer um card que funcione tanto em uma coluna estreita quanto em uma larga, precisa criar variações ou usar classes utilitárias. É um trabalho manual e propenso a erros.
Com container queries, o card se ajusta sozinho. Defina o contêiner uma vez e o componente faz o resto. Isso reduz drasticamente a duplicação de código e facilita a manutenção de design systems.
4. Performance e manutenção
Media queries podem levar a um CSS inchado, cheio de regras específicas para cada breakpoint. Container queries incentivam um pensamento mais modular, o que geralmente resulta em menos código e mais organização.
Por outro lado, media queries são mais previsíveis e já foram testadas em batalha. Container queries exigem um novo paradigma de pensamento, o que pode gerar confusão no início.
5. Suporte dos navegadores
Media queries são universais. Não há preocupação com compatibilidade. Container queries, embora suportadas no Chrome, Edge e Safari, ainda não têm suporte completo no Firefox. Isso significa que você precisa de fallbacks ou progressive enhancement.
A boa notícia é que o suporte está melhorando rapidamente. Em 2026, é provável que container queries sejam tão comuns quanto media queries. Mas, por enquanto, é essencial verificar a compatibilidade antes de adotá-las em produção.
Quando usar container queries (e quando fugir delas)
Container queries não são uma bala de prata. Elas resolvem problemas específicos, e usá-las no lugar errado pode complicar seu código. Aqui está um guia prático:
- Use container queries quando: você tem componentes reutilizáveis que precisam se adaptar a diferentes contêineres, como cards, widgets ou tabelas.
- Use media queries quando: você precisa de mudanças globais de layout, como ajustar a estrutura da página em diferentes dispositivos.
- Combine as duas: media queries para o layout macro, container queries para o micro. É uma combinação poderosa.
- Evite container queries se: você precisa de suporte a navegadores antigos ou se o componente não varia significativamente em diferentes contextos.
Outro ponto importante: container queries não substituem a necessidade de pensar em acessibilidade e performance. Elas são uma ferramenta a mais no seu arsenal, não uma solução mágica.
Um erro comum é tentar usar container queries para ajustar o layout da página inteira. Isso não funciona — e não deveria. Para mudanças estruturais, as media queries continuam sendo a escolha certa.
Como combinar container queries e media queries na prática
Agora que você entende as diferenças, vamos ver como usar as duas juntas em um projeto real. Imagine um layout com uma sidebar e um conteúdo principal. A sidebar tem 250px, o conteúdo tem 800px.
Você pode usar media queries para reorganizar a página em telas menores, empilhando a sidebar e o conteúdo. Dentro do conteúdo, você usa container queries para ajustar os cards conforme o espaço disponível.
O resultado é um layout que se adapta tanto ao dispositivo quanto ao contexto de cada componente. É o melhor dos dois mundos.
Para implementar, comece definindo os contêineres com container-type. Depois, escreva as regras @container para os componentes. Por fim, use media queries para as mudanças globais. A ordem não importa, mas a clareza do código sim.
Lembre-se de testar em diferentes navegadores. Como o suporte a container queries ainda é parcial, use a detecção de recursos com @supports para fornecer fallbacks.
Perguntas frequentes sobre container queries e media queries
Para fechar, aqui estão as respostas para as dúvidas mais comuns sobre o assunto:
Qual é a diferença entre container queries e media queries?
Media queries respondem ao tamanho da viewport, enquanto container queries respondem ao tamanho de um elemento contêiner específico. Isso permite que componentes se adaptem ao espaço disponível, independentemente do viewport.
Quando devo usar container queries em vez de media queries?
Use container queries quando precisar que um componente se adapte ao seu contêiner, como cards em layouts flexíveis ou grids. Use media queries para ajustes globais de layout baseados no tamanho da tela, como alterar a navegação em dispositivos móveis.
Container queries são suportadas em todos os navegadores?
Não, container queries ainda não são suportadas em todos os navegadores. Atualmente, são suportadas nas versões mais recentes do Chrome, Edge e Safari, mas o Firefox ainda não oferece suporte completo. Verifique a compatibilidade antes de usar em produção.
Posso usar container queries junto com media queries?
Sim, container queries e media queries podem ser usadas juntas. Media queries cuidam do layout global, enquanto container queries ajustam componentes individuais. Essa combinação é poderosa para criar designs verdadeiramente responsivos.
Conclusão: o futuro do CSS é modular
O CSS que você conhecia mudou. A responsividade deixou de ser uma questão de tela e passou a ser uma questão de contexto. Container queries representam essa evolução: a capacidade de criar componentes que se adaptam ao ambiente, não ao dispositivo.
Media queries não vão desaparecer. Elas continuam essenciais para o layout global. Mas, para componentes modulares, as container queries são a ferramenta certa. Entender a diferença entre container queries vs media queries é o primeiro passo para escrever CSS mais inteligente e sustentável.
Se você quer se aprofundar em desenvolvimento web, confira nossos outros artigos sobre web desenvolvimento e web design. E não deixe de acompanhar a GiraSites nas redes sociais para mais dicas como esta: Facebook, Instagram, YouTube e TikTok.
O futuro do CSS é modular. E ele já chegou.