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/