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.


```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 with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* Media queries
* Uso de media queries desde el código (en-US)
* `window.matchMedia()`
* `MediaQueryListListener` (en-US)
* `MediaQueryListEvent` (en-US)