Método matchMedia() de Window

Definición y uso

matchMedia() El método devuelve una lista de consultas de medios con los resultados de la consulta.

Véase también:

Objeto MediaQueryList

Consulta de medios

La consulta de medios del método matchMedia() puede ser cualquier característica de media de la regla @media de CSS, como min-height, min-width, orientación, etc.

Ejemplo

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

Ejemplo

Ejemplo 1

¿Es la pantalla/vista mayor a 700 píxeles de ancho?

if (window.matchMedia("(max-width: 700px)").matches) {
  // Ancho de la vista menor o igual a 700 píxeles
}
  // Ancho de la vista mayor a 700 píxeles
}

prueba personalmente

Explicación del ejemplo

Este ejemplo ejecuta la consulta de medios y la compara con el estado actual de la ventana.

Para ejecutar consultas de medios responsive cuando cambia el estado de la ventana, agregue un oyente de eventos al objeto MediaQueryList (véase más ejemplos a continuación):

Ejemplo 2

Si el ancho de la vista es menor o igual a 500 píxeles, configure el color de fondo en amarillo; de lo contrario, configurelo en rosa:

// Crear función match
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  }
    document.body.style.backgroundColor = "pink";
  }
}
// // Crear objeto MediaQueryList
const mmObj = window.matchMedia("(max-width: 700px)");
// Llamar a la función match en tiempo de ejecución:
myFunction(mmObj);
// Añadir la función match como oyente de cambios de estado:
mmObj.addListener(myFunction);

prueba personalmente

sintaxis

window.matchMedia("mediaQuery)

parámetros

parámetros Descripción
mediaQuery Requerido. La cadena que representa la media query.

Valor devuelto

Tipo Descripción
Objeto Objeto MediaQueryList con resultados de media query.

Compatibilidad del navegador

Todos los navegadores lo admiten matchMedia():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte 11 Soporte Soporte Soporte Soporte