Al escribir una consulta de medios CSS, ¿hay alguna forma de especificar varias condiciones con la lógica "O"?

Estoy intentando hacer algo como esto:

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

Use una coma para especificar dos (o más) reglas diferentes:

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

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

... Además, puede combinar múltiples consultas de medios en una lista separada por comas; Si alguna de las consultas de medios en la lista es verdadera, se aplica la hoja de estilo asociada. Este es el equivalente de una operación lógica "u".

Consultas de medios CSS y operadores lógicos: una breve descripción general;)

La respuesta rapida.

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

La larga respuesta.

Aquí hay mucho, pero he tratado de hacer que la información sea densa, no solo escritura esponjosa. ¡Ha sido una buena oportunidad para aprender! Tómese el tiempo para leer sistemáticamente y espero que sea útil.

Preguntas de los medios

Las consultas de medios se utilizan esencialmente en el diseño web para crear experiencias de navegación específicas del dispositivo o la situación; Esto se hace utilizando la @mediadeclaración dentro del CSS de una página . Esto se puede usar para mostrar una página web de manera diferente en una gran cantidad de circunstancias: ya sea que esté en una tableta o televisor con diferentes relaciones de aspecto, si su dispositivo tiene una pantalla en color o en blanco y negro, o, quizás con mayor frecuencia, cuando un usuario cambia el tamaño de su navegador o cambia entre dispositivos de navegación con diferentes tamaños de pantalla (en términos muy generales, el diseño como este se conoce como diseño web receptivo )

Operadores logicos

Al diseñar para estas situaciones, parece haber cuatro operadores lógicos que pueden usarse para requerir combinaciones de requisitos más complejas cuando se dirigen a una variedad de dispositivos o tamaños de ventana gráfica.

(Nota: si no comprende las diferencias entre las reglas de medios, las consultas de medios y las consultas de características, primero examine la sección inferior de esta respuesta para familiarizarse un poco mejor con la terminología asociada con la sintaxis de consulta de medios

1. Y ( y palabra clave)

Requiere que se cumplan todas las condiciones especificadas antes de que las reglas de estilo surtan efecto.

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

Las reglas de estilo especificadas no entrarán en vigencia a menos que todas las siguientes se evalúen como verdaderas:

• El tipo de medio es 'pantalla' y
• La ventana gráfica tiene al menos 700 px de ancho y
• La orientación de la pantalla es actualmente horizontal.

Nota: Creo que, si se usan juntas, estas tres consultas de funciones forman una única consulta de medios .

2. O ( listas separadas por comas )

En lugar de una o palabra clave, las listas separadas por comas se usan para encadenar múltiples consultas de medios juntas para formar una regla de medios más compleja

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

Las reglas de estilo especificadas entrarán en vigencia una vez que cualquier consulta de medios se evalúe como verdadera :

1. El tipo de medio es 'portátil' o
2. La ventana gráfica tiene al menos 650 px de ancho o
3. La orientación de la pantalla es actualmente horizontal.

3. NO ( no palabra clave)

La palabra clave not se puede usar para negar una sola consulta de medios (y NO una regla de medios completa lo que significa que solo niega entradas entre un conjunto de comas y no la regla de medios completa después de la declaración @media).

Del mismo modo, tenga en cuenta que la palabra clave not niega las consultas de medios, no se puede usar para negar una consulta de función individual dentro de una consulta de medios. *

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

El estilo especificado aquí entrará en vigor si

1. El tipo de medio Y la resolución mínima no cumplen con sus requisitos ('pantalla' y '300 ppp' respectivamente) o
2. La ventana gráfica tiene al menos 800 píxeles de ancho.

En otras palabras, si el tipo de medio es 'pantalla' y la resolución mínima es 300 dpi, la regla será no en vigencia a menos que el ancho mínimo de la ventana gráfica sea de al menos 800 píxeles.

(La palabra clave no puede ser un poco rara de decir. Avíseme si puedo hacerlo mejor.;)

4. SOLO ( solo palabra clave)

Según tengo entendido, la única palabra clave se usa para evitar que los navegadores antiguos malinterpreten las consultas de medios más recientes como el tipo de medios más estrecho utilizado anteriormente. Cuando se usa correctamente, los navegadores antiguos / no conformes simplemente deben ignorar el estilo por completo.

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

Creo que un navegador antiguo / no compatible simplemente ignoraría esta línea de código, creo que leería la única palabra clave y la consideraría un tipo de medio incorrecto . (Ver aquí y aquí para obtener más información de personas más inteligentes)

PARA MÁS INFORMACIÓN

Para obtener más información (incluidas más funciones que se pueden consultar), consulte: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Comprender la terminología de la consulta de medios

Nota: necesitaba aprender la siguiente terminología para que todo aquí tenga sentido, particularmente en relación con la palabra clave not . Aquí está como lo entiendo:

Una regla de medios (MDN también parece llamar a estas declaraciones de medios) incluye el término @mediacon todas sus consultas de medios subsiguientes

@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)

Una consulta de medios es un conjunto de consultas de características. Pueden ser tan simples como una consulta de características o pueden usar la palabra clave y para formar una consulta más compleja. Las consultas de medios se pueden separar por comas para formar reglas de medios más complejas (consulte el o palabra clave arriba).

screen (Nota: aquí solo se usa una consulta de características).

only screen

only screen and (max-resolution:800dpi)

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

NO handheld, (min-width: 650px) . (Tenga en cuenta la coma: aquí hay dos consultas de medios).

Una consulta de características es la parte más básica de una regla de medios y simplemente se refiere a una característica dada y su estado en una situación de navegación dada.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Fragmentos de código e información derivada de:

Consultas de medios CSS por parte de los Colaboradores de Mozilla (con licencia CC-BY-SA 2.5 ). Se usaron algunos ejemplos de código con pequeñas modificaciones para (con suerte) aumentar la claridad de la explicación.

Hay dos formas de escribir consultas de medios adecuadas en css. Si está escribiendo consultas de medios para un dispositivo más grande primero, entonces la forma correcta de escribir 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 */
}

Pero si está escribiendo consultas de medios para dispositivos más pequeños primero, entonces sería 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 */
}