> Faqs > Mediaqueries con operación lógica de OR

Mediaqueries con operación lógica de OR

Necesito hacer una consulta de mediaqueries de CSS en la que tenga una relación lógica de OR entre dos condiciones de anchura de la página.

Hasta ahora había usado varias veces la operación lógica de AND en las mediaqueries, pero no consigo hacerla con la relación de OR. He probado varias cosas, por ejemplo esto:

@media(min-width: 450px) and (max-width: 575px) or (min-width: 800px)

Pero es que ni siquiera sería esto, porque necesito usar paréntesis, de modo que que el AND se evalúe primero y luego el OR. Mi mediaquerie simplificada sería algo como (A and B) or C. Si le coloco paréntesis entonces ya no funciona nada.

Respuestas

La operación lógica de or en las CSS media queries se hace con el caracter coma ",".

Realmente no es que sea un operador lógico, sino es el caracter que se usa en las CSS para especificar que los estilos se apliquen a más de un elemento. En el caso de las mediaqueries, simplemente los estilos se aplicarán a una y otra condición señalada.

Para que quede más claro, el código CSS para tu ejemplo sería este:

@media(min-width: 450px) and (max-width: 575px) , (min-width: 800px)

Según la notación de los paréntesis que has seguido en tu pregunta, esta regla de mediaqueries sería como esto: (A and B) or C. Pero quede claro que ese uso de paréntesis ahí no tiene validez dentro de las condiciones lógicas de las mediaquieres, es decir, no forma parte de la sintaxis de CSS para estas reglas.

Espero haberte ayudado.

Camila
585 23 39 6