First of all, I would like to highlight that I am quite a newbie in javascript programming and am trying to learn as much as I can from here. Reading the enquire js api, documentations as well as the sourcecode. I would like to know what is the difference between enquire js and the conventional using matchmedia and resize event listeners.

Link to enquire js:.js/

Would appreciate any contribution

First of all, I would like to highlight that I am quite a newbie in javascript programming and am trying to learn as much as I can from here. Reading the enquire js api, documentations as well as the sourcecode. I would like to know what is the difference between enquire js and the conventional using matchmedia and resize event listeners.

Link to enquire js:http://wicky.nillia.ms/enquire.js/

Would appreciate any contribution

• javascript
• enquire.js
• matchmedia

1 Answer 1

enquire author here :) I occasionally keep an eye on questions asked about it on SO, so I can offer help.

There is no difference as such, enquire is built on top of matchMedia. So a more pertinent question might be "what does enquire offer above and beyond the matchMedia API?"

Enquire, at it's most basic is a simple wrapper around the matchMedia API. It's goal is to eliminate the boilerplate code you constantly write with matchMedia (it's not a very nice API on it's own). It also gives more of a full lifecycle for dealing with media queries: setup (which can be optionally deferred), match, unmatch, destroy. You'd have to handle all that yourself without enquire. Also, it simplifies unregistering media queries and provides a trap door for older browsers, with shouldDegrade

In other words, enquire is good where you're doing fairly advanced stuff with MQs in JS. Otherwise, you can just use the raw matchMedia API - which I definitely remend for simple stuff. If you go down this route, definitely do not use resize events as then you have to put logic in to debounce events etc. and it gets plex quick! Instead use the browser's native MediaQueryList.addListener:

matchMedia("screen and (min-width:40em)").addListener(function(mql) {
   if(mql.matches) {
        // do something when matching
   }
   else {
        // do soemthing when no match
   }
});

Hope that clears things up for you