ab-mediaquery

AB-mediaQuery

That's the JavaScript side of Media Queries. It proposes you some very useful methods for your scripts. That plugin is in vanilla JS, with no dependencies.

Demo: Codepen

NPM: https://www.npmjs.com/package/ab-mediaquery

npm install ab-mediaquery

The plugin is commonJS and AMD compliant.

Usage

You only need to call that function to create AB.mediaQuery object and bind the breakpoint 'watcher':

mediaQuery();

What you get

Return the current breakpoint. Can be 'tiny', 'small', 'medium', 'large' or 'huge':

AB.mediaQuery.current;

check if the current breakpoint is at least the specified one and return true/false:

AB.mediaQuery.atLeast('small');

'changed.ab-mediaquery' event is automatically triggered when breakpoint change:

window.addEventListener('changed.ab-mediaquery', function(){
  ...
});

You can list watched media queries generated by the plugin:

AB.mediaQuery.getQueries();

Return media query rule from breakpoint name:

AB.mediaQuery.get('small');