Support for media queries must be added through the custom build screen. I've gone ahead and rebuilt a new custom download using the previous options, as well as adding media query support found under the Extra panel, as shown in the following screenshot:
With media queries added to the library, a new mq
method is now available. One caveat that should be noted is that if a browser does not support media queries at all this method will always return false
. This applies generally to old versions of IE.
With media queries now in our library, testing is as simple as passing an argument. Here is the sample usage from the Modernizr site:
Modernizr.mq('only screen and (max-width: 768px)') // true
This will test the media type of "only screen" (as opposed to print, or other) for a maximum width of 768 pixels. Now, as mentioned earlier, older IE browsers with no support for media queries to speak of will always return false
. To combat these earlier versions the Modernizr library would include a shim for this named Respond JS. However, this is no longer the case and if you want to shim in this type of support, it must be added manually due to some IE 8 crashing issues causing the need for its removal. Hopefully, future versions will resolve this bottleneck. In the next section, I'll show you how to use the mq
method to test for support and then shim with Respond JS.