Consultas de medios CSS: ancho máximo O altura máxima
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) {
...
}
Utilice una coma para especificar dos (o más) reglas diferentes:
@media screen and (max-width: 995px),
screen and (max-height: 700px) {
...
}
De https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Las comas se utilizan para combinar varias consultas de medios en una sola regla. Cada consulta en una lista separada por comas se trata por separado de las demás. Por lo tanto, si alguna de las consultas de una lista es verdadera, toda la declaración de medios devuelve verdadera. En otras palabras, las listas se comportan como un operador u lógico.
la respuesta rapida
Separar reglas con comas
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
la respuesta larga
Hay mucho aquí, pero he tratado de que la información sea densa, no solo escritura esponjosa. ¡Ha sido una buena oportunidad para aprender por mí mismo! Tómese el tiempo para leer sistemáticamente y espero que sea útil.
Consultas de medios CSS y operadores lógicos: una breve descripción general;)
Las consultas de medios se utilizan esencialmente en el diseño web para crear experiencias de navegación específicas para dispositivos o situaciones; esto se hace usando la @mediadeclaración dentro del CSS de una página . Esto se puede utilizar para mostrar una página web de manera diferente en una gran cantidad de circunstancias: ya sea que esté en una tableta o en un 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, diseñar como este se conoce como Diseño Web Responsive )
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 al apuntar a una variedad de dispositivos o tamaños de ventanas gráficas .
(Nota: si no comprende las diferencias entre reglas de medios, consultas de medios y consultas de funciones, primero explore la sección inferior de esta respuesta para familiarizarse un poco mejor con la terminología asociada con la sintaxis de las consultas de medios.
1. Y ( y palabra clave)
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 se aplicarán a menos que todo lo siguiente se evalúe como verdadero:
- El tipo de medio es 'pantalla' y
- La ventana gráfica tiene al menos 700 píxeles de ancho y
- Actualmente, la orientación de la pantalla es horizontal.
Nota: Creo que, utilizadas juntas, estas tres consultas de funciones forman una única consulta de medios .
2. O ( listas separadas por comas )
En lugar de una palabra clave o , se utilizan listas separadas por comas para encadenar varias 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 una consulta de medios se evalúe como verdadera :
- El tipo de medio es "portátil" o
- La ventana gráfica tiene al menos 650 px de ancho o
- Actualmente, la orientación de la pantalla es horizontal.
3. NO ( no palabra clave)
La palabra clave not se puede utilizar para negar una única 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 que sigue a la declaración @media).
De manera similar, tenga en cuenta que la palabra clave not niega las consultas de medios; no se puede utilizar para negar una consulta de característica 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
- El tipo de medio Y la resolución mínima no cumplen con sus requisitos ('pantalla' y '300 ppp' respectivamente) o
- 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 de 300 ppp, la regla no entrará en vigor a menos que el ancho mínimo de la ventana gráfica sea de al menos 800 píxeles.
(La palabra clave not puede ser un poco rara de expresar. Avíseme si puedo hacerlo mejor;)
4. SOLAMENTE ( única palabra clave)
Según tengo entendido, la única palabra clave se utiliza para evitar que los navegadores más antiguos malinterpreten las consultas de medios más nuevas como el tipo de medio más limitado y utilizado anteriormente. Cuando se usan correctamente, los navegadores más antiguos o no compatibles deberían simplemente ignorar el estilo por completo.
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
Creo que un navegador antiguo o no compatible simplemente ignoraría esta línea de código por completo, ya 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 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 consultas de medios
Nota: Necesitaba aprender la siguiente terminología para que todo aquí tuviera sentido, particularmente en lo que respecta a la palabra clave not . Aquí está tal 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 funciones. Pueden ser tan simples como una consulta de función o pueden usar la palabra clave and 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 más arriba).
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: aquí hay dos consultas de medios).
Una consulta de función es la parte más básica de una regla de medios y simplemente se refiere a una función determinada 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 realizadas por colaboradores de Mozilla (con licencia CC-BY-SA 2.5 ). Se utilizaron algunos ejemplos de código con modificaciones menores para (con suerte) aumentar la claridad de la explicación.
Hay dos formas de escribir consultas de medios adecuadas en CSS. Si primero escribe consultas de medios para dispositivos más grandes, 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 primero escribe consultas de medios para dispositivos más pequeños, 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 */
}
