¡Media Queries con JS (Básico)!

Las media queries son una forma de adaptar el diseño y el contenido de una página web según las características del dispositivo o la ventana del navegador. Por ejemplo, podemos cambiar el tamaño o la posición de los elementos según el ancho o la altura de la pantalla, o mostrar u ocultar ciertos elementos según la orientación o el modo oscuro.

Normalmente usamos las media queries en CSS, pero también podemos usarlas en JavaScript con la función matchMedia. Esta función nos permite evaluar una media query y obtener un objeto MediaQueryList que contiene información sobre si se cumple o no la consulta, y que además nos permite escuchar los cambios que se produzcan.

Cómo usar matchMedia

El uso es muy simple: llamamos a la función window.matchMedia() y le pasamos como argumento una cadena con la media query que queremos evaluar. Por ejemplo:

//Creamos una media query para detectar si la pantalla tiene al menos 600px de ancholet widthQuery = window.matchMedia("(min-width: 600px)");

// Obtenemos el valor booleano de si se cumple onola consultaconsole.log(widthQuery.matches); // true o false

Cómo escuchar los cambios en las media queries

Una de las ventajas de usar matchMedia es que podemos escuchar a los eventos que se generan cuando cambia el resultado de la consulta. Por ejemplo, si cambiamos el tamaño de la ventana del navegador o giramos el dispositivo móvil. Para ello, usamos el método addListener y le pasamos una función que se ejecutará cada vez que se produzca un cambio. Por ejemplo:

// Creamos una media query para detectar si el dispositivo está en modo oscurolet darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");

// Añadimos un listener para detectar los cambios
darkModeQuery.addListener(function(event) {
// Obtenemos el nuevo valor booleano de si se cumple o no la consultaconsole.log(event.matches); // true o false// Cambiamos el color del fondo según el modo oscuroif (event.matches) {
document.body.style.backgroundColor = "black";
} else {
document.body.style.backgroundColor = "white";
}
});

La función que pasamos al método addListener recibe como parámetro un objeto que contiene información sobre el evento, como el valor actualizado de matches y media.

Conclusión

Usar media queries en JavaScript con matchMedia nos permite crear páginas web más dinámicas y responsivas, adaptando no solo el diseño sino también el comportamiento según las características del dispositivo o la ventana del navegador. Es una forma sencilla y potente de mejorar la experiencia de usuario y aprovechar las ventajas del CSS desde JavaScript.

Extra

Dato interesante: Hice esto en ayuda con Bing Chat ❤️