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.

Resources