Ao escrever uma consulta de mídia CSS, existe alguma maneira de especificar várias condições com a lógica "OU"?

Estou tentando fazer algo assim:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

Use uma vírgula para especificar duas (ou mais) regras diferentes:

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

De https://developer.mozilla.org/en/CSS/Media_queries/

... Além disso, você pode combinar várias consultas de mídia em uma lista separada por vírgula; se alguma das consultas de mídia da lista for verdadeira, a folha de estilos associada será aplicada. Isso é equivalente a uma operação lógica "ou".

Consultas de mídia CSS e operadores lógicos: uma breve visão geral;)

A resposta rápida.

Separe as regras com vírgulas: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

A resposta longa.

Há muita coisa aqui, mas tentei deixar as informações densas, não apenas uma escrita fofa. Foi uma boa chance de aprender sozinho! Aproveite o tempo para ler sistematicamente e espero que seja útil.

Consultas de mídia

As consultas de mídia são essencialmente usadas no design da web para criar experiências de navegação específicas para dispositivos ou situações; isso é feito usando a @mediadeclaração no CSS de uma página . Isso pode ser usado para exibir uma página da Web de maneira diferente em um grande número de circunstâncias: se você está em um tablet ou TV com diferentes proporções, se o seu dispositivo possui uma tela colorida ou em preto e branco ou, talvez com mais freqüência, quando um usuário altera o tamanho do navegador ou alterna entre dispositivos de navegação com tamanhos de tela variados (de modo geral, o design como esse é chamado de Web design responsivo )

Operadores lógicos

Ao projetar para essas situações, parece haver quatro operadores lógicos que podem ser usados ​​para exigir combinações mais complexas de requisitos ao direcionar uma variedade de dispositivos ou tamanhos de viewport .

(Observação: se você não entender as diferenças entre regras de mídia, consultas de mídia e consultas de recursos, navegue primeiro na seção inferior desta resposta para se familiarizar um pouco com a terminologia associada à sintaxe de consulta de mídia

1. AND ( e palavra - chave)

Requer que todas as condições especificadas sejam atendidas antes que as regras de estilo entrem em vigor.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

As regras de estilo especificadas não serão aplicadas, a menos que todas as seguintes sejam avaliadas como verdadeiras:

• O tipo de mídia é 'tela' e
• A janela de visualização tem pelo menos 700 px de largura e
• Atualmente, a orientação da tela é paisagem.

Nota: acredito que, juntas, essas três consultas de recursos compõem uma única consulta de mídia .

2. OU ( listas separadas por vírgula )

Em vez de uma palavra-chave ou , as listas separadas por vírgula são usadas para encadear várias consultas de mídia para formar uma regra de mídia mais complexa

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

As regras de estilo especificadas entrarão em vigor quando qualquer consulta de mídia for avaliada como verdadeira :

1. O tipo de mídia é 'portátil' ou
2. A janela de visualização tem pelo menos 650 pixels de largura ou
3. Atualmente, a orientação da tela é paisagem.

3. NÃO ( não palavra-chave)

A palavra-chave not pode ser usada para negar uma única consulta de mídia (e NÃO uma regra de mídia completa - o que significa que apenas nega entradas entre um conjunto de vírgulas e não a regra de mídia completa após a declaração @media).

Da mesma forma, observe que a palavra-chave not nega as consultas de mídia, não pode ser usada para negar uma consulta de recurso individual em uma consulta de mídia. *

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

O estilo especificado aqui entrará em vigor se

1. O tipo de mídia AND min-resolution não atende aos requisitos ('screen' e '300dpi' respectivamente) ou
2. A janela de visualização tem pelo menos 800 pixels de largura.

Em outras palavras, se o tipo de mídia for 'tela' e a resolução mínima for 300 dpi, a regra não entrará em vigor, a menos que a largura mínima da viewport seja de pelo menos 800 pixels.

(A palavra-chave not pode ser um pouco descolada. Deixe-me saber se eu posso fazer melhor.;)

4. APENAS ( apenas palavra-chave)

Pelo que entendi, a única palavra-chave é usada para impedir que navegadores mais antigos interpretem mal as consultas de mídia mais recentes como o tipo de mídia mais estreito usado anteriormente. Quando usados ​​corretamente, navegadores antigos / não compatíveis devem ignorar completamente o estilo.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Um navegador antigo / não compatível apenas ignoraria completamente essa linha de código, acredito que leria a única palavra-chave e a consideraria um tipo de mídia incorreto . (Veja aqui e aqui para obter mais informações de pessoas mais inteligentes)

PARA MAIS INFORMAÇÕES

Para obter mais informações (incluindo mais recursos que podem ser consultados), consulte: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Noções básicas sobre terminologia de consulta de mídia

Nota: eu precisava aprender a terminologia a seguir para que tudo aqui fizesse sentido, principalmente com relação à palavra-chave not . Aqui está como eu o entendo:

Uma regra de mídia (MDN também parece chamar essas declarações de mídia) inclui o termo @mediacom todas as suas consultas de mídia subsequentes

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

Uma consulta de mídia é um conjunto de consultas de recursos. Eles podem ser tão simples quanto uma consulta de recurso ou podem usar a palavra-chave e para formar uma consulta mais complexa. As consultas de mídia podem ser separadas por vírgula para formar regras de mídia mais complexas (consulte a palavra-chave ou acima).

screen (Nota: apenas uma consulta de recurso é usada aqui.)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

NÃO handheld, (min-width: 650px). (Observe a vírgula: existem duas consultas de mídia aqui.)

Uma consulta de recurso é a parte mais básica de uma regra de mídia e simplesmente diz respeito a um determinado recurso e seu status em uma determinada situação de navegação.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Fragmentos de código e informações derivadas de:

Consultas de mídia CSS dos Contribuidores da Mozilla (licenciadas sob CC-BY-SA 2.5 ). Algumas amostras de código foram usadas com pequenas alterações para (espero) aumentar a clareza da explicação.

Existem duas maneiras de escrever consultas de mídia adequadas em css. Se você estiver escrevendo consultas de mídia para dispositivos maiores primeiro, a maneira correta de escrever será:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

Mas se você estiver escrevendo consultas de mídia para dispositivos menores primeiro, seria algo como:

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}