MediaQueryList

Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

Un objeto MediaQueryList almacena información en un media query aplicada a un documento y se encarga de enviar notificaciones a los oyentes cuando cambia el estado de consulta de medios (es decir, cuando la prueba de consulta de medios comienza o deja de evaluarse a true).

Esto hace posible observar un documento para detectar cuando sus consultas de medios cambian, en lugar de sondear los valores periódicamente y le permite programar cambios en un documento basado en el estado de consulta de medios.

Propiedades

La nueva versión de la interfaz de MediaQueryList hereda las propiedades de su interfaz principal, EventTarget.

MediaQueryList.matches Read only

Un Boolean que devuelve true si el document actualmente coincide con la lista de consultas de medios, o false si no.

MediaQueryList.media Read only

Un DOMString representa una consulta de medios serializada.

Controladores de eventos

MediaQueryList.onchange

Una propiedad de controlador de eventos que representa una función que se invoca cuando se desencadena el evento change, es decir, cuando cambia el estado del soporte de consulta de medios. El objeto de evento es una instancia MediaQueryListEvent, que se reconoce como una instancia de MediaListQuery en navegadores antiguos, para propósitos de compatibilidad con versiones anteriores.

Métodos

La nueva versión de la interfaz de MediaQueryList hereda métodos de su interfaz principal, EventTarget.

MediaQueryList.addListener()

Agrega un escucha al MediaQueryListener que ejecutará una función de devolución de llamada personalizada en respuesta al cambio de estado de consulta de medios. Esto es básicamente un alias para EventTarget.addEventListener(), para propósitos de compatibilidad con versiones anteriores.

MediaQueryList.removeListener()

Elimina un escucha de MediaQueryListener. Esto es básicamente un alias para EventTarget.removeEventListener (), para propósitos de compatibilidad con versiones anteriores.

Ejemplos

Este ejemplo sencillo crea una MediaQueryList y, a continuación, establece un detector para detectar cuándo cambia el estado de la consulta de medios, ejecutando una función personalizada cuando cambia la apariencia de la página.

js
var para = document.querySelector("p");

var mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /* el ventana tiene 600 píxeles de ancho o menos*/
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /* la ventana tiene más de 600 píxeles de ancho */
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addListener(screenTest);

Nota: Puedes encontrar este ejemplo en GitHub (ver el codigo fuente, y también verlo en ejecución).

Especificaciones

Specification
CSSOM View Module
# the-mediaquerylist-interface

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también