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 devuelvetrue
si eldocument
actualmente coincide con la lista de consultas de medios, ofalse
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 instanciaMediaQueryListEvent
, que se reconoce como una instancia deMediaListQuery
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 paraEventTarget.addEventListener()
, para propósitos de compatibilidad con versiones anteriores. MediaQueryList.removeListener()
-
Elimina un escucha de
MediaQueryListener
. Esto es básicamente un alias paraEventTarget.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
Specification |
---|
CSSOM View Module # the-mediaquerylist-interface |
Compatibilidad con navegadores
BCD tables only load in the browser