Hubo un error de script en esta página. Mientras los editores del sitio lo solucionan, puedes ver una parte del contenido más abajo.

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

{{APIRef("CSSOM View")}}{{SeeCompatTable}}

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, {{domxref("EventTarget")}}.

{{domxref("MediaQueryList.matches")}} {{readonlyInline}}
 Un {{domxref("Boolean")}} que devuelve  true si el
 {{domxref("document")}} actualmente coincide con la lista de consultas de medios, o false si no.
{{domxref("MediaQueryList.media")}} {{readonlyInline}}
 Un {{domxref("DOMString")}} representa una consulta de medios serializada.

Controladores de eventos

{{domxref("MediaQueryList.onchange")}}
Una propiedad de controlador de eventos que representa una función que se invoca cuando se desencadena el evento {{event("change")}}, es decir, cuando cambia el estado del soporte de consulta de medios. El objeto de evento es una instancia {{domxref("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, {{domxref("EventTarget")}}.

{{domxref("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 {{domxref ("EventTarget.addEventListener ()"}}, para propósitos de compatibilidad con versiones anteriores. 
{{domxref("MediaQueryList.removeListener()")}}
 Elimina un escucha de MediaQueryListener. Esto es básicamente un alias para {{domxref ("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
{{SpecName("CSSOM View", "#the-mediaquerylist-interface", "MediaQueryList")}} {{Spec2("CSSOM View")}} Initial definition

Compatibilidad del navegador

{{CompatibilityTable}}

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 9 {{CompatVersionUnknown}} {{CompatGeckoDesktop("6.0")}} 10 12.1 5
New version spec update {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatGeckoDesktop("55")}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatUnknown}}
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatUnknown}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
New version spec update {{CompatNo}} {{CompatUnknown}} {{CompatGeckoMobile("55")}} {{CompatNo}} {{CompatVersionUnknown}} {{CompatUnknown}} {{CompatVersionUnknown}}

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: DeipMartin
 Última actualización por: DeipMartin,