MediaQueryList

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.

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

Especificaciones Estado Comentario
CSS Object Model (CSSOM) View Module
La definición de 'MediaQueryList' en esta especificación.
Working Draft Initial definition

Compatibilidad del navegador

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 9 (Yes) 6.0 (6.0) 10 12.1 5
New version spec update (Yes) ? 55 (55) Sin soporte (Yes) ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support ? (Yes) ? ? ? ? ?
New version spec update Sin soporte ? 55.0 (55) Sin soporte (Yes) ? (Yes)

Ver también