javascript / jquery插件，用于添加对媒体查询的支持

Question

发现这个jquery插件增加了对媒体查询的支持

所以你可以使用：

<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" />

等等，但它不支持这种媒体查询（在样式表中）

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

    body{background:yellow}
}

有没有呢？

Answer 1

你应该看看enquire.js 。

Answer 2

你也可以这样做

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();
    });

 });

---

编辑：

你似乎没有热身，所以如何更广泛的例子呢？

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

Answer 3

Wouter van der Graaf为浏览器中的媒体查询支持制作了一个javascript插件，该插件本身不支持它：

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