Uso de media queries

Las Media queries le permiten aplicar estilos CSS según el tipo general de un dispositivo (como impresión o pantalla) u otras características como la resolución de la pantalla o el ancho del viewport del navegador. Las media queries se utilizan para lo siguiente:

Nota: Los ejemplos en esta página usan @media de CSS con fines ilustrativos, pero la sintaxis básica sigue siendo la misma para todos los tipos de consultas de medios.

Sintaxis

Una media query se compone de un tipo de medio opcional y cualquier cantidad de expresiones de características de medios, que pueden combinarse opcionalmente de varias maneras usando operadores lógicos. Las consultas de medios no distinguen entre mayúsculas y minúsculas.

Una media query se calcula como true cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se muestra un documento y todas las expresiones de características de medios se computan como verdaderas. Las consultas que involucran tipos de medios desconocidos siempre son falsas.

Nota: Una hoja de estilo con una media query adjunta a su etiqueta <link> se descargará incluso si la consulta devuelve false, la descarga se realizará pero la prioridad de la descarga será mucho menor. No obstante, su contenido no se aplicará a menos que y hasta que el resultado de la consulta cambie a true. Puede leer por qué sucede esto en el blog de Tomayac Por qué el navegador descarga hojas de estilo con consultas de medios que no coinciden.

Destinos de tipos de medios

Los tipos de medios describen la categoría general de un dispositivo determinado. Aunque los sitios web suelen diseñarse teniendo en cuenta las pantallas, es posible que desee crear estilos destinados a dispositivos especiales, como impresoras o lectores de pantalla basados en audio. Por ejemplo, este CSS es para las impresoras:

css
@media print {
  /* … */
}

También puedes considerar múltiples dispositivos. Por ejemplo, esta regla @media usa dos consultas de medios tanto para dispositivos de pantalla como de impresión:

css
@media screen, print {
  /* … */
}

Consulte tipos de medios para obtener una lista de todos los tipos de medios. Debido a que describen dispositivos solo en términos muy amplios, solo algunos están disponibles; para atributos más específicos, use características de medios en su lugar.

Destinos de características de los medios

Las características multimedia describen las características específicas de un user agent, dispositivo de salida o entorno determinado. Por ejemplo, puede aplicar estilos específicos a monitores de pantalla ancha, computadoras que usan ratón o dispositivos que se usan en condiciones de poca luz. Este ejemplo aplica estilos cuando el mecanismo de entrada principal del usuario (como un ratón) puede pasar sobre los elementos:

css
@media (hover: hover) {
  /* … */
}

Muchas características de medios son características de rango, lo que significa que pueden tener el prefijo "min-" o "max-" para expresar restricciones de "condición mínima" o "condición máxima". Por ejemplo, este CSS aplicará estilos solo si el ancho del viewport de su navegador es igual o menor que 1250px:

css
@media (max-width: 1250px) {
  /* … */
}

Si crea una consulta de características multimedia sin especificar un valor, los estilos anidados se utilizarán siempre que el valor de la función no sea cero (o none, en Nivel 4). Por ejemplo, este CSS se aplicará a cualquier dispositivo con una pantalla a color:

css
@media (color) {
  /* … */
}

Si una característica no se aplica al dispositivo en el que se ejecuta el navegador, las expresiones relacionadas con esa característica multimedia siempre son falsas.

Para obtener más ejemplos de Características multimedia, consulte la página de referencia de cada característica específica.

Creación de media queries complejas

En ocasiones, es posible que desee crear una media query que dependa de varias condiciones. Aquí es donde entran los operadores lógicos: not, and y only. Además, puede combinar múltiples media queries en una lista separada por comas; esto le permite aplicar los mismos estilos en diferentes situaciones.

En el ejemplo anterior, ya vimos el operador and usado para agrupar un tipo de medios con una característica de medios. El operador and también puede combinar múltiples características de medios en una sola media query. Mientras tanto, el operador not niega una media query, básicamente invirtiendo su significado normal. El operador only evita que los navegadores antiguos apliquen los estilos.

Nota: En la mayoría de los casos, el tipo de medios all se usa de forma predeterminada cuando no se especifica ningún otro tipo. Sin embargo, si usa los operadores not u only, debe especificar explícitamente un tipo de medio.

Combinación de múltiples tipos o características

La palabra clave and combina una característica de medios con un tipo de medio u otras características de medios. Este ejemplo combina dos características de medios para restringir los estilos a dispositivos orientados al paisaje con un ancho de al menos 30 ems:

css
@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

Para limitar los estilos a los dispositivos con una pantalla, puede encadenar las características de medios al tipo de medios screen:

css
@media screen and (min-width: 30em) and (orientation: landscape) {
  /* … */
}

Pruebas para múltiples consultas

Puede usar una lista separada por comas para aplicar estilos cuando el dispositivo del usuario coincida con cualquiera de los diversos tipos de medios, características o estados. Por ejemplo, la siguiente regla aplicará sus estilos si el dispositivo del usuario tiene una altura mínima de 680px o es un dispositivo de pantalla en modo vertical:

css
@media (min-height: 680px), screen and (orientation: portrait) {
  /* … */
}

Tomando el ejemplo anterior, si el usuario tuviera una impresora con una altura de página de 800px, la declaración de medios devolvería verdadero porque se aplicaría la primera consulta. Del mismo modo, si el usuario estuviera en un teléfono inteligente en modo vertical con una altura de ventana gráfica de 480px, se aplicaría la segunda consulta y la declaración de medios seguiría siendo verdadera.

Invertir el significado de una consulta

La palabra clave not invierte el significado de una media query completa. Solo negará la media query específica a la que se aplica. (Por lo tanto, no se aplicará a todas las media queries en una lista de media queries separadas por comas). La palabra clave not no se puede usar para negar una consulta de característica individual, solo una media query completa. El not se evalúa en último lugar en la siguiente consulta:

css
@media not all and (monochrome) {
  /* … */
}

Esto significa que la consulta anterior se evalúa así:

css
@media not (all and (monochrome)) {
  /* … */
}

No se evaluaría así:

css
@media (not all) and (monochrome) {
  /* … */
}

Otro ejemplo es la siguiente media query:

css
@media not screen and (color), print and (color) {
  /* … */
}

Esto significa que la consulta anterior se evalúa así:

css
@media (not (screen and (color))), print and (color) {
  /* … */
}

Mejora de la compatibilidad con navegadores más antiguos

La palabra clave only evita que los navegadores antiguos que no admiten media queries con caracterñisticas de medios apliquen los estilos dados. No tiene efecto en los navegadores modernos.

css
@media only screen and (color) {
  /* … */
}

Mejoras de sintaxis en el nivel 4

La especificación Media Queries Level 4 incluye algunas mejoras de sintaxis para hacer que las media queries utilicen características que tienen un tipo de "rango", por ejemplo, ancho o alto, menos detallado. El nivel 4 agrega un contexto de rango para escribir tales consultas. Por ejemplo, usando la funcionalidad max- para el ancho, podríamos escribir lo siguiente:

Nota: La especificación Media Queries Level 4 tiene un soporte razonable en los navegadores modernos, pero algunas características multimedia no son compatibles. Consulte la tabla de compatibilidad del navegador de @media para obtener más detalles.

css
@media (max-width: 30em) {
  /* … */
}

En Media Queries Level 4 esto se puede escribir como:

css
@media (width <= 30em) {
  /* … */
}

Usando min- y max- podríamos probar un ancho entre dos valores como este:

css
@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

Esto se convertiría a la sintaxis de nivel 4 como:

css
@media (30em <= width <= 50em) {
  /* … */
}

La media queries de Nivel 4 también agregan formas de combinar media queries usando álgebra booleana completa con and, not, y or.

Negar una característica con not

El uso de not() alrededor de una característica de medios niega esa característica en la consulta. Por ejemplo, not(hover) coincidiría si el dispositivo no tuviera capacidad de desplazamiento:

css
@media (not(hover)) {
  /* … */
}

Prueba de múltiples características con or

Puede usar or para probar una coincidencia entre más de una característica, resolviendo como true si alguna de las características es verdadera. Por ejemplo, las siguientes consultas de prueba para dispositivos que tienen una pantalla monocromática o capacidad de desplazamiento:

css
@media (not (color)) or (hover) {
  /* … */
}

Véase también