javascript/jquery plugin to add support to media queries

Question

found out about this jquery plugin that adds support to media queries

So you can use:

<link rel="stylesheet" type="text/css" href="wider.css" media="only screen and (min-width: 1200px)" /> 
<link rel="stylesheet" type="text/css" href="handheld-iphone.css" media="only screen and (max-width: 480px), handheld" />

and so on, but it does not support this kind of media queries (in stylesheet)

@media screen and (max-width: 1024px) {
    body{background:red}
}
@media screen and (max-width: 740px) {

    body{background:yellow}
}

Is there any that does?

Answer 1

你应该看看enquire.js 。

Answer 2

You could do something like this as well

http://jsfiddle.net/47DSD/

 $(document).ready(function() {

     function wResize() {

             var winW = $(window).width();
             var Body = $('body');

         if ( winW < '1024') {
             Body.css({ 'background-color':'red' }); 
         }
         if ( winW < '740' ) {
             Body.css({ 'background-color':'yellow' }); 
         }         

     }

     wResize();

    $(window).resize(function() {
        wResize();
    });

 });

---

Edit:

You didnt seem to warm up to this, so how about a little more extensive example?

http://jsfiddle.net/47DSD/1/

Answer 3

Wouter van der Graaf made a javascript plugin for media query support in browsers that don't natively support it:

http://code.google.com/p/css3-mediaqueries-js/