AB-mediaQuery example

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

Informations

AB-mediaQuery is initilized 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)'
  }
});

Get current valid break points:

console.log(AB.mediaQuery.current);

Condition your JS on break points:


if (AB.mediaQuery.is('smallOnly')) {
  // true if media query is 'screen and (max-width: 767px)'
}

Example

Here are some outputs that can be used on JavaScript side (resize window to see changes). You can also check your browser console: