Xitrus está alojado en:
El Responsive Design es una técnica de diseño que ha revolucionado la forma en que vemos las páginas webs, permitiéndonos disponer de una correcta visualización de una misma página en distintos dispositivos.
Las @media queries es el mecanismo más simple de usar detectar las condiciones de visualización del dispositivo (como tamaño de pantalla, orientación...) y ahora con matchMedia disponemos de estas consultas en JavaScript, ejecutando diferente código según el dispositivo o los cambios en su visualización (como girar un movil 90º).
La pequeña API matchMedia nos permite hacer básicamente dos cosas: comprobar si se cumple esa @media query y ejecutar una función cuando cambia de estado esta @media query.
De esta forma podremos emular de forma nativa y eficiente los cambios que produce el CSS con las @media queries pero con JavaScript, que como es lógico, nos permite interactuar de una forma más amplia con el diseño y el contenido de la página, como veremos a continuación.
El uso es muy simple, usando el método matchMedia() y pasando como argumento una condición de una @media query nos contestará con un objeto MediaQueryList. Este objeto contiene el atributo matches, que nos devuelve un booleano según si se cumple o no la consulta.
- var orientacion = matchMedia("(orientation: portrait)");
- orientacion.matches; // true si la pantalla es más alta que ancha
- orientacion.media; // Devuelve: "(orientation: portrait)"
- // Forma abreviada para conocer si se cumple la @media query
- matchMedia("(orientation: portrait)").matches;
Como vemos es muy simple su funcionamiento, pero como decía, permite controlar el cambio de estado de la @media query mediante un listener, de forma similar a la de cualquier otro elemento del DOM. Como argumento el evento nos dará el propio objeto MediaQueryList, del que podremos consultar el matches.
En el siguiente ejemplo cambiaremos una clase de un elemento e incrementaremos el número que contiene, para saber el número de veces ha cambiado la @media query.
- var orientacion = matchMedia("(orientation: portrait)");
- orientacion.addListener(function(mql){
- document.getElementById('contador').className = mql.matches ? 'activo' : 'inactivo';
- document.getElementById('contador').textContent++;
- });
Para probar su funcionamiento podéis redimensionar la pantalla de vuestro navegador para intentar adaptaros a las @media queries y ver como cambiar los elementos.
Sin duda es una forma mucho más simple de controlar tamaños de pantalla, proporciones y modos de visualización con JavaScript sin tener que recurrir a métodos complejos y poco compatibles, ya que matchMedia tiene la misma compatibilidad que las @media queries, es decir: es compatible con todos los navegadores modernos.
Xitrus está alojado en:
