Media Query callbacks en Javascript con Enquire.js

Publicado el 7 de septiembre, 2012

Enquire.js es una librería de Javascript liviana (esta pesa menos de 1KB con GZIP y en su versión minified) y sin dependencias que nos permite manejar las media queries. En el artículo “Enquire.js – Media Query Callbacks in JavaScript” nos introducen a cómo utilizar esta librería y para qué casos nos podría servir.

Esta librería nos sirve para responsive designs, mobile designs y para ayudara los navegadores antiguos a utilizarlos media queries.

La razón principal que nos da Chris Coyier para el uso de esta librería es la siguiente:

Imagina que tienes un sitio web ya establecido, que fue diseñado para dispositivos con pantallas grandes. En todo lugar escuchaste esto del “responsive design” y deseas que tu sitio también sea “responsive”. Entonces después de haber diseñado planeado como debería funcionar tu sitio web en dispositivos con una pantalla pequeña te das cuenta de que tu menú funciona con efectos hover en CSS, en pocas palabras, esto no funcionará en pantallas touch pequeñas.

Buscas en Google y encuentras una solución para convertir un menú en un dropdown, pero algo no se siente del todo bien. Te das cuenta que el código que convierte los menús en dropdowns también correrá en pantallas grandes!! con lo que se gasta ciclos de CPU y desearías que hubiese una forma de que la solución con Javascript dependa del tamaño.

Enquire.js nos sirve para este tipo de problemas que nos explica Chris, y que puede ser solucionado de la siguiente manera

enquire.register("max-width: 960px", function() {
  // colocar código que convierte el menú en un dropdown
});

Descargar ó Clonarlo de GitHub

Hola! Soy un Desarrollador Web, trabajo con frameworks PHP y Tecnologías Front-End.

Ver todos mis artículos »