Medios CSS en JavaScript

Resumen rápido: Las media queries de CSS son una forma eficaz y óptima de aplicar estilos según las propiedades y ajustes del dispositivo. En JavaScript existe una función llamada matchMedia que permite utilizar esas mismas media queries dentro del código para detectar y reaccionar a cambios en el entorno del usuario.

Qué es matchMedia: matchMedia es un método disponible en el objeto window que permite evaluar o vigilar una media query CSS sobre el documento y devuelve un objeto MediaQueryList. En CSS tendríamos por ejemplo @media (max-width: 480px) { body { font-size: 16px; background-color: lightgray; } } y en JavaScript se usa la parte entre paréntesis con window.matchMedia, por ejemplo const matchMobileQuery = window.matchMedia((max-width: 480px)); El objeto resultante incluye la propiedad matches que indica si la consulta coincide actualmente y puede escucharse para cambios a fin de ejecutar lógica cuando el estado cambia.

Seguimiento de cambios: Para monitorizar una media query se añade un listener al objeto MediaQueryList que devuelve matchMedia. Por ejemplo, para reaccionar a la preferencia de esquema de color se crea la media query prefers-color-scheme y se añade un manejador que comprueba la propiedad matches y aplica lógica según sea modo oscuro o claro. Cada vez que el usuario cambia la preferencia de color se puede ejecutar código para actualizar estilos, clases o variables CSS desde JavaScript.

Cuándo usar matchMedia: Es una alternativa más correcta que leer window.innerWidth manualmente para saber en qué tipo de dispositivo estamos. Si lo que necesitas es detectar tamaño de pantalla, orientación del dispositivo, prefers-color-scheme u otras características del entorno, matchMedia es la herramienta adecuada. Para seguimiento de cambios en el tamaño de elementos concretos es mejor usar ResizeObserver. matchMedia no se limita al ancho de pantalla, también sirve para reaccionar a modo oscuro, orientación, resolución y otras condiciones soportadas por las media queries.

En Q2BSTUDIO como empresa de desarrollo de software ofrecemos soluciones integrales que combinan diseño front-end moderno y prácticas avanzadas de ingeniería para crear aplicaciones a medida y software a medida que aprovechan técnicas como matchMedia para mejorar la experiencia de usuario. Si buscas desarrollar aplicaciones responsivas y adaptativas, conoce nuestro servicio de desarrollo de aplicaciones a medida. También somos especialistas en inteligencia artificial, agentes IA e ia para empresas y podemos integrar modelos y automatizaciones que trabajan junto a interfaces adaptativas.

Además de desarrollo a medida ofrecemos servicios de ciberseguridad y pentesting, servicios cloud aws y azure, servicios inteligencia de negocio y soluciones con power bi para mejorar la analítica y toma de decisiones. Si te interesa explorar cómo combinar front-end responsivo con inteligencia artificial y seguridad profesional, en Q2BSTUDIO diseñamos flujos completos desde la arquitectura en la nube hasta la inteligencia de negocio. Gracias por leer, si te interesa que implementemos estas soluciones en tu proyecto contacta con nosotros para evaluar opciones y alcance.