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 (en-US) que devuelve  true si el
 document actualmente coincide con la lista de consultas de medios, o false si no.
MediaQueryList.media (en-US) Read only
 Un DOMString representa una consulta de medios serializada.

Controladores de eventos

MediaQueryList.onchange (en-US)
Una propiedad de controlador de eventos que representa una funci贸n que se invoca cuando se desencadena el evento change (en-US), es decir, cuando cambia el estado del soporte de consulta de medios. El objeto de evento es una instancia MediaQueryListEvent (en-US), 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! (en-US)

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