Consultas de medios CSS: ancho máximo O altura máxima

Al escribir una consulta de medios CSS, ¿hay alguna forma de que pueda 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 estilos asociada. Esto es el equivalente de una operación lógica “o”.

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

La respuesta rápida.

Separe las reglas con comas: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

La respuesta larga.

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


Preguntas de los medios

Las consultas de medios se usan esencialmente en el diseño web para crear experiencias de navegación específicas del dispositivo o de la situación; esto se hace usando la statement @media dentro del CSS de una página. Esto se puede usar para mostrar una página web de manera diferente en un gran número de circunstancias: si 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, tal vez con mayor frecuencia, cuándo 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 generales, el diseño como este se conoce como Diseño Web Adaptable )

Operadores logicos

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

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

1. AND ( y palabra clave)

Requiere que se cumplan todas las condiciones especificadas antes de que las reglas de estilo entren en vigencia.

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

Las reglas de diseño especificadas no se implementarán a menos que todos los siguientes elementos se evalúen como verdaderos:

  • 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 paisaje.

Nota: Creo que si se utilizan juntas, estas tres consultas de características constituyen una única consulta de medios .

2. O ( listas separadas por comas )

En lugar de una o una palabra clave, las listas separadas por comas se utilizan para encadenar varias 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 ‘handheld’ o
  2. La ventana gráfica tiene al menos 650 píxeles de ancho o
  3. La orientación de la pantalla es actualmente paisaje.

3. NO ( no palabra clave)

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

Del mismo modo, tenga en cuenta que la palabra clave no niega las consultas de medios, no se puede utilizar 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 vigencia si

  1. El tipo de medio AND min-resolution no cumple con sus requisitos (‘pantalla’ y ‘300dpi’ 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 ppp, la regla no entrará 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 raro de decir. Avíseme si puedo hacerlo mejor;)

4. SOLAMENTE ( solo palabra clave)

Según tengo entendido, la única palabra clave se usa para evitar que los navegadores más antiguos malinterpreten las nuevas consultas de medios como el tipo de medio más antiguo utilizado. Cuando se usan correctamente, los navegadores antiguos / que no cumplen deben ignorar por completo el diseño.

Un navegador anterior / no conforme 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. (Consulte 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 características que pueden consultarse), consulte: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators


Entender la terminología de consulta de medios

Nota: Necesitaba aprender la siguiente terminología para que todo aquí tenga sentido, particularmente con respecto a la palabra clave no . Aquí está, como yo lo entiendo:

Una regla de medios (MDN también parece llamar a estas declaraciones de medios) incluye el término @media con 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ística o pueden usar la palabra clave y para formar una consulta más compleja. Las consultas de medios pueden estar separadas por comas para formar reglas de medios más complejas (consulte la palabra clave o anterior).

screen (Nota: aquí solo se utiliza una consulta de función).

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: hay dos consultas de medios aquí).

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

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 Mozilla Contributors (con licencia bajo CC-BY-SA 2.5 ). Algunas muestras de código se usaron con alteraciones menores para (con suerte) boost la claridad de la explicación.