matchMedia(), la forma más simple y rápida de usar @media queries en JavaScript

El Responsive Design ya no es solo una moda, sino que se ha convertido en una premisa en el diseño web. Desde que se accede más a Internet desde dispositivos móviles que desde PC se ha convertido en norma el adaptarse a dispositivos móviles (de las diferentes formas que existen) y el que no lo lleva a cabo acaba perdiendo público en su web, sea del tipo que sea.

Hace tiempo hablamos extensamente en Genbeta Dev sobre Responsive Design con una extensa introducción, pero pasamos por alto algo muy ligado al diseño adaptable y que justamente no incumbe a CSS, y es el uso de las @media queries en JavaScript con matchMedia().

@media queries

Las @media queries es la forma más simple que nos brinda CSS para mostrar distintos estilos en una web dependiendo de factores físicos, como es la dimensión de la pantalla o la densidad de píxel por pulgada. Ya hablamos hace tiempo de su funcionamiento, pero por si alguien no las conoce pondré un ejemplo simple.

// Imágenes en cascada
img {
    display: block;
    width: 100%;
}

// Imágenes en línea al alcanzar 600px de ancho (de pantalla)
@media all and (max-width: 600px) {
    img {
        display: inline-block;
        width: 50%;
    }
}

matchMedia()

Esta simple API nos proporciona todo lo necesario para llevar a cabo este mismo efecto con JavaScript y poder controlar aspectos tan esenciales como si un Smartphone está en posición vertical u horizontal.

La API tiene dos funcionalidades: la que comprueba si se cumple o no la @media query y un listener que salta cuando esta condición cambia, a la cual le pasamos una función como si fuese un listener cualquiera de JavaScript.

De esta forma podemos conocer datos del dispositivo que está visualizando la página sin necesidad de recurrir a recursos menos eficientes y más bastos como sería buscar cada dato con las funciones nativas de JavaScript (si no nos hace falta el dato y simplemente queremos que se cumpla una condición, como por ejemplo: anchoDePantalla > 600).

Comenzando con matchMedia()

Esta API, que interactuamos con ella a través de la llamada matchMedia() nos devuelve un objeto MediaQueryList que contiene dos atributos (matches que contiene un booleano e indica si se cumple la consulta y media que almacena la regla) y dos métodos (addListener y removeListener).

// @media query básica
var orientacion = matchMedia("(orientation: portrait)");

orientacion.matches; // true/false si se cumple la condición
oritenacion.media; // En este caso: "(orientation: portrait)"

// Listener
orientacion.addListener(function(mql){
    document.getElementById('orientacion').innerHTML = mql.matches ? 'vertical' : 'horizontal';
});

Como vemos arriba, el argumento que recibe esta función es el propio objeto MediaQueryList, por lo que podemos consultar si se cumple esta @media query sin mayor complicación.

Conclusión

Muchas veces lo que realmente necesitamos con JavaScript son datos exactos, tamaños de pantalla, proporciones... todo de forma precisa para cumplir nuestro cometido. Pero en ocasiones, como antes mencioné, simplemente comprobamos si supera o no un tamaño, para eso podemos usar esta API sin necesidad de interactuar en exceso con ella simplemente usando el .matches.

// true/false si se cumple
if(matchMedia("(orientation: portrait)").matches) alert('¡Más simple!');

Y Bueno, las @media queries también hay que recalcar que detectan parámetros más complejos del dispositivo, como es la profundidad de colores que admite la pantalla o la densidad de píxeles.

En Genbeta Dev | Introducción al Responsive Design