Lógica en consultas de medios | Programar Plus

En caso de que tengas pedos en el cerebro sobre esto constantemente, como yo.

Si

Eso es lo que son las consultas de medios: lógicas if declaraciones. “Si” estas cosas son ciertas sobre el navegador, utilice el CSS que contiene.

Y

La palabra clave and.

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

O

Separación por comas.

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

Técnicamente, se tratan como dos consultas de medios independientes, pero eso es or.

No

Invierta la lógica con la palabra clave not.

@media not all and (max-width: 600px) {
  html { background: red; }
}

Solo haciendo not (max-width: 600px) no parece funcionar para mí, de ahí la sintaxis un poco extravagante anterior. Quizás alguien pueda explicarme eso. Tenga en cuenta que no solo funciona para la consulta de medios actual, por lo que si separa por comas, solo afectará a la consulta de medios en la que se encuentra. También tenga en cuenta que no invierte la lógica para toda la consulta de medios como un todo, no para partes individuales de ella. no x e y = no (x e y) ≠ (no x) e y

Exclusivo

Para asegurarse de que solo una consulta de medios esté vigente a la vez, haga que los números (o lo que sea) sea posible. Puede ser más fácil manejarlos mentalmente de esta manera.

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

Lógicamente, esto es un poco como un switch declaración, solo que sin una manera simple de hacer “si ninguno de estos coincide hace esto” como default.

Primordial

No hay nada que impida que más de una consulta de medios sea verdadera al mismo tiempo. Puede ser más eficiente usar esto en algunos casos en lugar de hacerlos todos exclusivos.

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

Las consultas de medios no agregan especificidad a los selectores que contienen, pero el orden de las fuentes sigue siendo importante. Lo anterior funcionará porque están ordenados correctamente. Cambie ese orden y en los anchos de ventana del navegador por encima de 800px, el fondo sería rojo, quizás de forma poco intuitiva.

Móvil primero

Sus estilos de pantalla pequeña están en su CSS de pantalla normal y luego, a medida que la pantalla se agranda, anula lo que necesita. Entonces, min-width consultas de medios en general.

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

Escritorio primero

Sus estilos de pantalla grande están en su CSS de pantalla normal y luego, a medida que la pantalla se vuelve más pequeña, anula lo que necesita. Entonces, max-width consultas de medios en general.

html { background: red; }

@media (max-width: 600px) {
  html { background: green; }
}

Poniéndose loco

Puedes ser tan complejo como quieras con esto.

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

Nota la only La palabra clave estaba destinada a evitar que los navegadores compatibles con consultas de medios no carguen la hoja de estilo o utilicen los estilos. No estoy seguro de cuán útil fue / todavía es.