Get events when mediaquery changes happen
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
src
.eslintrc.json
.gitignore
LICENSE
README.md
gulpfile.js
package.json
yarn.lock

README.md

mediaquery-event

Get events when mediaquery changes happen. written in plain vanilla js.

example

document.addEventListener('mediaquery', function (event) {

  if (!event.detail.active) {
    return; // dont react to mediaqueries becoming inactive
  }
  
  if (event.detail.media === 'desktop') {
      // do something
  }
  
  if (event.detail.media === 'mobile') {
      // do something else
  }
});

mqe.init({
    mediaqueries: [
        {name: 'mobile', media: 'screen and (max-width: 1023px)'},
        {name: 'desktop', media: 'screen and (min-width: 1024px)'}
    ]
});

bugs and caveats

Good ol' InternetExplorer handles some stuff differently (no kiddin'), not all of these "issues" are handled yet:

  • Your mediaquery.media should start with "screen and", otherwise IE adds its own idea to it.