ab-mediaquery

AB-mediaQuery is the JavaScript side of media queries. It proposes you some very useful methods for your scripts

Usage no npm install needed!

<script type="module">
  import abMediaquery from 'https://cdn.skypack.dev/ab-mediaquery';
</script>

README

AB-mediaQuery

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

Have a look at this Demonstration page (offline version is in the docs folder).

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

It's used in AB-interchange.

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';

If you need a built version, it's in the dist folder.

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');
    // return a boolean
    
  • JavaScript event changed.ab-mediaquery event is triggered when media query changes, you can listen to it:

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