AB-mediaQuery
That's the JavaScript side of Media Queries. It proposes you some very useful methods for your scripts.
Demo: Codepen
NPM: https://www.npmjs.com/package/ab-mediaquery
npm install ab-mediaquery
The plugin is CommonJS and AMD compliant, in vanilla JS, with no dependencies.
Compatibility
Because of the usage of matchMedia
, compatibility start with IE 10. To rise compatibility up to IE 9, you can add https://github.com/paulirish/matchMedia.js/ polyfill.
SETUP
There are different ways to setup breakpoints and media queries rules. Default media queries are in ** em ** unit, here is why: http://zellwk.com/blog/media-query-units/
Only JS with default settings: not recommanded
Simple call mediaQuery
function with no parameters:
mediaQuery();
You can go further by changing default settings, see below (More options) for available options.
Beware, no CSS will be generated, you will only get JS side. Here are media queries that will be generated on JS side. Please, reflect them in your CSS:
* tinyOnly: screen and (max-width: 29.99em)
* smallOnly: screen and (min-width: 30em) and (max-width: 63.99em)
* small: screen and (min-width: 30em)
* mediumOnly: screen and (min-width: 64em) and (max-width: 79.99em)
* medium: screen and (min-width: 64em)
* largeOnly: screen and (min-width: 80em) and (max-width: 89.99em)
* large: screen and (min-width: 80em)
* huge: screen and (min-width: 90em)
JS with Sass: recommanded
Sass setup
First, define default media queries rules:
// unit must be in 'em'
$ab-breakpoints: (
small: 30em,
medium: 64em,
large: 80em,
huge: 90em
);
OPTIONAL: Then you can add your own custom rules (even with other units like px or rem)
$ab-mq-myRules: (
retina: 'screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
non-retina: 'not screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
my-media-query: 'screen and (min-width: 70em)',
...
);
Then include _AB-mediaQuery.scss
:
@include 'path/to/AB-mediaQuery'
JS setup
Simple call mediaQuery
function with no parameters:
mediaQuery();
More options
You can change default breakpoints values with bp
object and the debounce time on window resize with delay
option.
mediaQuery({
bp: {
small: '480em',
medium: '1024em',
large: '1280em',
huge: '1440em'
},
delay: 200
});
USAGE
Current breakpoints
That will return an array of current breakpoints
AB.mediaQuery.current;
Check specific breakpoint case
Check if window respects the breakpoint specified and return true/false. You can check default media queries generated by the plugin:
- tinyOnly: Only small mobiles
- small: From large mobiles
- smallOnly: Only large mobiles
- medium: From tablets
- mediumOnly: Only tablets
- large: From small desktops
- largeOnly: Only small desktops
- huge: Above small screens
But also your custom rules define in your Sass through $ab-mq-myRules
variable will be checked:
AB.mediaQuery.is('media-query-name-you-want-to-check);
JS event
'changed.ab-mediaquery' event is automatically triggered when breakpoints change:
window.addEventListener('changed.ab-mediaquery', function(){
...
});
Return media query rule from breakpoint name
AB.mediaQuery.get('small');