Upgrading with Respond.js

Question

I carefully evaluate the best way to use Modernizr and Respond.js for responsive design, and you have a couple of questions for the community.

First, I understand that when linking Modernizr with Respond. no other encodings or tests are required to support media queries in IE8 and below. In other words, when Respond.js comes with Modernizr, I just need to download Modernizr to my source in order to activate Respond.js. Right?

Secondly, do you think this is the most effective way to achieve support for media queries in IE8 and lower? In fact, I would include a more powerful Modernizr script than is necessary for browsers that already support media queries. Wouldn't it be more appropriate to separate these two scripts and load only Respond.js if the test for media queries is not performed?

Thirdly, if I would like to separate the two scenarios, what do you think is the best way to download Respond.js, if necessary? One option is to use IE's special conditional comment to load the response. Another option is to use yepnope and Modernizr to test support for media queries and downloads. Answer if necessary. Which would be more efficient and reliable.

Finally, if I decided to separate the two scenarios and use Modernizr to load, Reply, if necessary, I came across the following two methods:

<script> yepnope({ test : Modernizr.mq('(only all)'), nope : ['js/libs/respond.min.js'] }); </script> 

OR

 <script>Modernizr.mq('(min-width:0)') || document.write('<script src="js/libs/respond.min.js"><\/script>')</script> 

I found that the second crash is IE8, but it just needs to be rewritten. What technique would you recommend?

Thanks for the help.

Answer 1

First, I understand that when linking Modernizr with Respond. no other encodings or tests are required to support media queries in IE8 and below. In other words, when Respond.js comes with Modernizr, I just need to download Modernizr to my source in order to activate Respond.js. Right?

Well, you need at least some CSS3 multimedia queries to get you started. Respond.js is simply an implementation of JavaScript requests for browsers that do not support them (e.g. IE less than 8). Just make sure the link to Respond.js appears AFTER your CSS3 media queries ( link ).

So yes, if you have Respond.js bundled with Modernizr from a custom assembly or something else, and it loads after your CSS3, you're fine. In addition, Modernizr needs additional customization in your HTML ( link )

Secondly, do you think this is the most effective way to achieve support for media queries in IE8 and lower? In fact, I would include a more powerful Modernizr script than is necessary for browsers that already support media queries. Wouldn't it be more appropriate to separate these two scripts and load only Respond.js if the test for media queries is not performed?

Modernizr does not come with browser support without media queries . You need to add it to the custom assembly. So yes, I find it always helpful to respond. Minified, the library adds a little more than 3 kilobytes, and including this file in the Modernizr file will not add another GET request. I would say just leave it there to be ready for anything.

Thirdly, I would go for the Modernizr method. I like to use new material, all that extra javascript interferes.

Answer 2

The new version of Respond includes some testing features, so you don't need Modernizr or Yepnope!

Here's a revision: https://github.com/scottjehl/Respond/commit/4d60f45716b8395e6f24238f9dc5e34c857e87f2

included window.matchMedia polyfill from outside the main response.js function. The source code for this polyfill is located here https://github.com/paulirish/matchMedia.js , including its finished version will simplify the update, and allow less file compression for those who already include it through Modernizr or otherwise (if this is so you can remove it from Respond.js).

In addition, you should note that using yepnope.js can cause a delay in which you see non-media query styles before the styles and applications of the media styles are parsed and applied. The recommendation is that you put response.js in the header to avoid this as much as possible, although it is also good that your js files in the footer match you.

Answer 3

Function testing can be in a newer version of lib, for example, tkane2000 ... I just wanted to mention that you could probably do this with Modernizr:

  <script> Modernizr.load({ test: Modernizr.mq('only all'), nope: 'js/respond.min.js' }); </script> 

On the original poster, I think the request to check the media is incorrect '(only all)' ... There should not be parentheses based on some of the things I'm reading. Once I removed parens, response.js seems to be enabled accordingly.