Consultas de mídia CSS: max-width OU max-height

490

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) {
  ...
}
Fraser
fonte

Respostas:

938

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".

Fabrizio Calderan
fonte
3
@media screen e (max-width: 568px) e (max-height: 320px) {} - no meu caso, isso funciona corretamente
nosensus 5/17
5
@nosensus, a vírgula implica um relacionamento OR, o que significa que pode ser verdade para as regras serem aplicadas, conforme a pergunta original. O código que você mostra é para um relacionamento AND no qual ambos devem ser verdadeiros para que as regras sejam aplicadas.
Drew Noakes
Você está certo. "AND" é uma regra para ambas as escalas (altura e largura), porque em alguns casos precisamos exatamente dessa regra. Como você pode ter dois dispositivos, por exemplo, 320x560 e 320x480, a rotação do dispositivo será interrompida. Quero dizer "vírgula" e o sinal "AND" tem diferentes meios.
nosensus 30/09/17
265

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.

matthewsheets
fonte
3
Ótima resposta, no entanto, poderia ser aprimorada com um prefácio que forneça imediatamente a resposta necessária ("largura máxima OU altura máxima") da forma mais concisa possível (consulte a resposta dos fcalderans). O elaborado contexto de suporte deve seguir. Muitos usuários esperam uma solução instantânea sem ter que investir em uma curva de aprendizado mais ampla do que o necessário. Como usuário, eu preferiria encontrar uma resposta instantânea com a opção de buscar um contexto adicional, em vez de ter que examinar o contexto adicional para encontrar a resposta. Independentemente, bom trabalho e formatação.
precisa saber é o seguinte
3
Embora seja uma boa redação, não tenho tanta certeza de que uma pergunta específica seja um bom local para um iniciador inteiro de Consultas de mídia. Ou, em sentido inverso, a questão é tão específica que não faz justiça a essa resposta. Além disso, o termo "consulta de recurso" não aparece em Consultas de mídia, ele aparece em uma especificação CSS diferente , e o uso do termo no contexto de consultas de mídia é confuso - mas devo dizer que para quem começou a usar esse termo no Artigo MDN em primeiro lugar. O termo correto nas Consultas de mídia 4 é "condição de mídia".
BoltClock
Digamos que eu tenha que suportar todos os dispositivos iPhone, por isso devo escrever consultas de mídia para cada dispositivo separadamente, por exemplo, iPhone 5 (retrato e paisagem), iPhone6, iPhone 6 Plus e assim por diante. Se sim, acabarei escrevendo mais consultas de mídia cobrindo tamanho dos dispositivos. Estou correcto?
IAmRkrishnaV21 28/04
2

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 */
}
Navneet Kumar
fonte