MatchMedia( )
Esta API permite trabajar con responsive design; sin embargo, lo más recomendable es limitar su empleo únicamente para aquellos casos en los que se requiera realizar ciertas acciones que no puedan ser cubiertas por CSS, por ejemplo cambiar clases o modificar propiedades, es decir, cambios en los estilos de la página. Esta API permite trabajar con media queries de una forma diferente a la que permite CSS, pero no debe ser usada para definir los estilos de la página; únicamente se recomienda usar para añadir interactividad a la página.
Esta API consiste en el uso del método "matchMedia()"; una particularidad de este es que para su funcionamiento se necesita ubicar comillas ("") dentro de los paréntesis de este método, este es un detalle clave para el funcionamiento del método.
Ejemplo
Por otra parte, para el uso de este método también es necesario ingresar las "media query" entre paréntesis; este es otro detalle importante, ya que de lo contrario el media no será reconocido. Por lo tanto, tanto las comillas como los paréntesis dentro de estas son esenciales para el funcionamiento del método a la hora de definir los medias dentro de este.
Ejemplo
La función de "matchMedia" se podría resumir en que esta valida si se cumple la media que se defina en su interior; de hecho, al utilizar el método ".matches" se retorna un valor booleano que define si esta se cumple o no. De ese modo, una alternativa es utilizar un escucha de eventos para el evento "change", el cual en este caso se dispara cada vez que la propiedad ".matches" cambie su valor.
Ejemplo
De este modo, en el ejemplo, cada vez que el valor definido en el método ".matches" cambie de valor (true, false) se dispara el mensaje en consola, y de ese modo se puede utilizar el "matchMedia" para realizar una acción en caso de que las dimensiones de la pantalla cumplan con una condición en concreto.