$ npm install --save breaks
For the best experience the breakpoints defined in Sass/Less/Stylus should be
added as a json string to the head font-family like the following.
head{
font-family:'{"mobile": "320px","tablet": "768px","desktop": "960px"}';
}
var isMobile = breaks.is('>=mobile <960px');
// The 'mobile' keyword will be replaced with the corresponding value defined by
// the json array defined in the head font-family.
//
// In this case isMobile will be false or true depending of the following media query:
// (min-width: 320px) and (max-width: 959px)
// There is also the possibility to listen to enter and exit events for the queries:
breaks.enter('>=tablet <desktop', function() {
console.log('window is bigger or larger than tablet and smaller than desktop.');
});
breaks.exit('>=tablet <desktop', function() {
console.log('window is smaller than tablet or larger or equal to desktop.');
});Required
Type: string
The simplified query as text.
Required
Type: string
The breakpoint name corresponding to the breakpoints json data. This returns the breakpoint value as string. ex: "768px"
Required
Type: string
The simplified query as text.
Required
Type: function
Default: {}
The function to call when the query become active.
Required
Type: string
The simplified query as text.
Required
Type: function
Default: {}
The function to call when the query become inactive.
Required
Type: function
Default: {}
The callback to remove.
Required
Type: string
The simplified query as text.
Required
Type: function
Default: {}
The function to call when the query become active.
Type: function
Default: {}
The function to call when the query become inactive.
MIT © David Mignot