Media queries with Modernizr.mq

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:

Media queries with Modernizr.mq

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset