CSS Media Queries & Operadores Lógicos: Una breve Descripción ;)

La respuesta rápida.

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

La respuesta larga.

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

Medios Consultas

Las consultas de medios esencialmente se utilizan en el diseño web para crear experiencias de navegación específicas de dispositivos o situaciones; esto se hace utilizando la declaración @media dentro de la 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 un televisor con diferentes relaciones de aspecto, si su dispositivo tiene una pantalla a 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 responsivo)

Operadores lógicos

Al diseñar para estas situaciones, parece haber cuatro Operadores Lógicos eso se puede usar para requerir combinaciones más complejas de requisitos cuando se dirige a una variedad de dispositivos o tamaños viewport.

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

1. AND (and keyword)

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

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

Las reglas de estilo especificadas no entrarán en su lugar a menos que todo de lo siguiente se evalúa como verdadero:

• El tipo de medio es' screen ' y
• El viewport tiene al menos 700px de ancho y
• La orientación de la pantalla es actualmente horizontal.

Nota: Creo que usadas juntas, estas tres consultas de característicasconforman una única consulta de medios.

2. O (listas separadas por Comas)

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

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

Las reglas de estilo especificadas entrarán en vigor una vez que cualquiera media query se evalúe como verdadero :

1. El tipo de medio es' handheld ' o
2. La ventana tiene al menos 650px 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 única consulta de medios (y NO una regla full media meaning lo que significa que solo niega las entradas entre un conjunto de comas y no la regla full media después de la declaración @media).

Del mismo modo, tenga en cuenta que la palabra clave not niega las consultas de medios, no puede usarse para negar una consulta de entidad individual dentro de un medio consulta.*

@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 ambos sus requisitos ('screen' y '300dpi' respectivamente) o
2. La ventana tiene al menos 800 píxeles de ancho.

En otras palabras, si el tipo de medio es 'screen' y la resolución mínima es de 300 dpi, la regla no entrará en vigor a menos que el ancho mínimo de la vista sea de al menos 800 pixel.

(La palabra clave not puede ser un poco funky para declarar. Hazme saber si puedo hacerlo mejor. ;)

4. SOLO (solo palabra clave)

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

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

Un antiguo / el navegador no compatible ignoraría esta línea de código por completo, creo que ya que leería la palabra clave only y la consideraría un medio incorrecto type. (Ver aquí y aquí para 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 se pueden consultar), consulte: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Comprensión de la Terminología de Consulta de Medios

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

A media regla (MDN también parece llamar a estas declaraciones de medios) incluye el término @media con todos sus medios subsiguientes consultas

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

A media consulta es un conjunto de consultas de características. Pueden ser tan simples como una consulta de entidad o pueden usar las palabras 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 la palabra clave o anterior).

screen (Nota: Solo una consulta de características en uso aqui.)

only screen

only screen and (max-resolution:800dpi)

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

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

Una consulta feature 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:

Medios CSS queries by Mozilla Contributors (licensed under CC-BY-SA 2.5 ). Algunas muestras de código se utilizaron con pequeñas alteraciones para (con suerte) aumentar la claridad de la explicación.