Combinando Várias Media Queries
Use os operadores and, or e not para combinar recursos de mídia em consultas complexas.
Combinando Várias Media Queries é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
O operador and
A palavra-chave and exige que todas as condições sejam verdadeiras simultaneamente. É útil para direcionar-se conjuntamente a tamanhos e tipos específicos de dispositivos.
<div class="box">and operator demo</div>
Intervalo com and
A combinação de min-width e max-width com and tem como alvo um intervalo específico de largura da janela de visualização (estilos apenas para tablets):
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
Vírgula como OR
As consultas separadas por vírgulas funcionam como OR — os estilos são aplicados se ANY consulta corresponder:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
O operador not
not nega uma consulta de mídia inteira. Deve ser usado com cuidado — aplica-se à expressão completa da consulta, não apenas à primeira condição.
<div class="doc">not operator demo</div>
not com parênteses (moderno)
As consultas de mídia modernas do nível 4 permitem usar not() como uma função em recursos individuais:
<div class="panel">not() function demo</div>
Palavra-chave only (legada)
A palavra-chave only era usada para ocultar consultas de mídia de navegadores legados que não ofereciam suporte a recursos de mídia. Os navegadores modernos a ignoram, mas ela não causa problemas.
<div class="box">only keyword demo</div>
Aninhamento de consultas de mídia (aninhamento de CSS)
Com o aninhamento nativo de CSS, as consultas de mídia podem ser escritas dentro de blocos de seletores:
<div class="card">Nested media query demo</div>
Combinação de dispositivos móveis e DPI alto
Tenha como alvo especificamente dispositivos móveis (pequenos e com DPI alto):
<div class="icon"></div>
Impressão e cor
Vários recursos de mídia para estilos de impressão que se aplicam somente a impressoras coloridas:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
Consulta de mídia em @import
As consultas de mídia podem ser aplicadas no momento da importação para carregar condicionalmente folhas de estilo inteiras (embora isso bloqueie a renderização e deva ser usado com moderação):
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
Propriedades lógicas em consultas complexas
Como regra geral, consultas mais simples são mais fáceis de manter. Evite encadear condições em excesso. Quando uma consulta se torna complexa, considere reestruturar a abordagem de CSS em vez de complicar a consulta.
Verificação rápida
Qual consulta de mídia aplica estilos quando a janela de visualização tem pelo menos 600px de largura OR o dispositivo está na orientação paisagem?
Recapitulação
and exige que todas as condições sejam verdadeiras. As vírgulas funcionam como OR entre consultas. not nega uma consulta inteira. Combine min-width e max-width para definir intervalos. O CSS moderno oferece aninhamento de consultas de mídia dentro de blocos de seletores e a sintaxe de intervalos para expressões mais limpas.
Perguntas Frequentes
A aula “Combinando Várias Media Queries” é grátis?
Sim — o texto completo de “Combinando Várias Media Queries” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Combinando Várias Media Queries”?
Use os operadores and, or e not para combinar recursos de mídia em consultas complexas. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Combinando Várias Media Queries”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Sintaxe e Pontos de Interrupção Comuns
- Consultas de Largura, Altura e Orientação
- Prefers-Color-Scheme e Prefers-Reduced-Motion
- Combinando Várias Media Queries