ab-mediaquery

AB-mediaQuery

AB-mediaQuery is the JavaScript side of Media Queries. It's a very simple, yet convenient tool for your developments.

This dependencie free and vanilla script is damn small: less than 1.3KB (uglyfied and GZipped)!

Have a look at this demonstration (offline version in the docs folder).

Version 1 is used on French websites of ENGIE and Gaz tarif règlementé.

Install

npm install --save ab-mediaquery

Setup

Import in your JS bundle (webpack, ES6, browserify...):

import abMediaQuery from 'ab-mediaquery';

Built version are also available in the dist folder if your are not using a bundler.

Init the script with:

AB.plugins.mediaQuery({
  bp: {
    smallOnly:  'screen and (max-width: 767px)',
    mediumOnly: 'screen and (min-width: 768px) and (max-width: 1024px)',
    medium:     'screen and (min-width: 768px)',
    largeOnly:  'screen and (min-width: 1025px) and (max-width: 1280px)',
    large:      'screen and (min-width: 1025px)'
  }
});

Other example:

AB.plugins.mediaQuery({
  bp: {
    tiny: "screen and (max-width: 575px)",
    small: "screen and (min-width: 576px)",
    medium: "screen and (min-width: 768px)",
    large: "screen and (min-width: 992px)",
    huge: "screen and (min-width: 1200px)"
  }
});

Usage

• Get current breakpoints

  AB.mediaQuery.current;
  // return an array of current breakpoints
  

• Check specific breakpoint case

  AB.mediaQuery.is('mediumOnly');
  // will return true or false
  

• JavaScript event changed.ab-mediaquery event is triggered when media query changes, you can listen to it:

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