Last active
November 17, 2019 08:11
-
-
Save roylory/bb03c780057c831d34a6 to your computer and use it in GitHub Desktop.
Media query with Bootstrap grid classes in Javascript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mediaQuery = (function() { | |
// Same as in bootstrap/_variables.less | |
// var screenXs = 480; // Not used | |
var screenSm = 768; | |
var screenMd = 992; | |
var screenLg = 1200; | |
var screenXsMax = screenSm - 1; | |
var screenSmMax = screenMd - 1; | |
var screenMdMax = screenLg - 1; | |
return { | |
/** | |
* match() returns true | |
* if there's any match to the media query | |
* | |
* @param {String} str | |
* @return {Boolean} | |
* | |
* ex1: mediaQuery.match('xs') | |
* ex2: mediaQuery.match('md lg') | |
*/ | |
match: function(str) { | |
var arr = str.split(/[\s,|]+/); | |
// If there's any match, return true. | |
for (var i = 0; i < arr.length; i++) { | |
switch (arr[i]) { | |
case 'xs': | |
if (window.matchMedia('(max-width: ' + screenXsMax + 'px)').matches) | |
return true; | |
break; | |
case 'sm': | |
if (window.matchMedia('(min-width: ' + screenSm + 'px) and (max-width: ' + screenSmMax + 'px)').matches) | |
return true; | |
break; | |
case 'md': | |
if (window.matchMedia('(min-width: ' + screenMd + 'px) and (max-width: ' + screenMdMax + 'px)').matches) | |
return true; | |
break; | |
case 'lg': | |
if (window.matchMedia('(min-width: ' + screenLg + 'px)').matches) | |
return true; | |
break; | |
} | |
} | |
return false; | |
} | |
} | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment