El método window.matchMedia() en html se usa para devolver un objeto MediaQueryList que representa el resultado de la string de consulta de medios CSS especificada. El valor del método matchMedia() puede ser cualquiera de las opciones de medios de la regla CSS @media, como altura mínima, ancho mínimo, orientación, etc.
El objeto MediaQueryList tiene dos propiedades y dos métodos:
- Propiedad:
- coincidencias: se utiliza para comprobar los resultados de una consulta y devuelve un valor booleano.
- media: una string que representa la lista de consultas de medios serializados.
- Método:
- addListener(functionref): agrega una nueva función de escucha, que se ejecuta cada vez que cambia el resultado evaluado de la consulta de medios.
- removeListener(functionref): elimina una función de escucha adicional previamente de la lista de consulta de medios. No hace nada si el oyente especificado no está ya en la lista.
Sintaxis:
window.matchMedia( mediaQueryString )
Valores paramétricos:
- mediaQueryString: string que representa la consulta de medios para la que devolver un nuevo objeto MediaQueryList.
Valor de retorno: este método devuelve la string de consulta de medios CSS.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Window matchMedia() Method</title>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeesks</h1>
<h2>Window matchMedia() Method</h2>
<script>
function GFGFun(ar) {
if (ar.matches) {
document.body.style.backgroundColor = "white";
} else {
document.body.style.backgroundColor = "gray";
}
}
var ar = window.matchMedia("(max-width: 850px)")
GFGFun(ar)
ar.addListener(GFGFun)
</script>
</center>
</body>
</html>
Producción:
- Antes de cambiar el tamaño de la ventana del navegador:
- Después de cambiar el tamaño de la ventana del navegador:
Navegadores compatibles: los navegadores compatibles con el método matchMedia() de la ventana HTML se enumeran a continuación:
- Google Chrome
- explorador de Internet
- Firefox
- safari de manzana
- Ópera
Publicación traducida automáticamente
Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA