Blog
Some of my thought on technology and programming.
Just a quick post to document how to use Modernizr‘s .mq()
function with Bootstrap 3.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// media query breakpoints: <768px, >768px, >992px, >1200px
// requires jQuery and Modernizr with
$(window).resize(function() {
// console.log( Modernizr.mq('(max-width: 767px)') );
// console.log( Modernizr.mq('(min-width: 768px) and (max-width: 991px)') );
// console.log( Modernizr.mq('(min-width: 992px) and (max-width: 1199px)') );
// console.log( Modernizr.mq('(min-width: 1200px)') );
if (Modernizr.mq('(max-width: 767px)')) {
// small screen size
console.log('small screen size');
} else if (Modernizr.mq('(min-width: 768px) and (max-width: 991px)')) {
// small-medium screen size
console.log('small-medium screen size');
} else if (Modernizr.mq('(min-width: 992px) and (max-width: 1199px)')) {
// medium-large screen size
console.log('medium-large screen size');
} else if (Modernizr.mq('(min-width: 1200px)')) {
// large screen size
console.log('large screen size');
}
});
You can use this JavaScript in your pages to watch for the windows being resized and change the DOM etc via JavaScript based on the current Media Query size.