修改下面的分辨率的CSS屬性

我試圖使用下面的代碼來改進自適應設計上的幾個佈局元素。它似乎沒有工作，但它稱爲第一個屬性，但就是這樣。這裏使用顏色處於測試狀態。修改下面的分辨率的CSS屬性

$(document).ready(function() { 
    if ((screen.width>940)) { 
     // if screen size is 940px wide or larger 
     $("body").css('color', '#222'); // you can also use $(".yourClass").hide(); 
    } else { 
     // if screen size width is less than 940px 
     $("body").css('color', 'red'); // here you can also use show(); 
    } 
});

任何幫助真誠感謝！

來源

2011-09-13 Jeremy

你可能想用'$（window）.resize（function（）{/ * code here * /}）將'if'語句封裝爲resize（）;'。 – thirtydot

你有什麼意思嗎$(window).width()？ screen.width在我的電腦上始終是1920。在智能手機上它應該更小，但在任何給定的設備上它應該是相當穩定的。在任何情況下使用$(window).width()都證明你的語法是正確的。

http://jsfiddle.net/VvFkK/

來源

2011-09-13 23:40:14

謝謝，我相信你是對的，那就是我要找的！雖然我嘗試了你的代碼，但它破壞了我的頁面上的其他Javascript。 – Jeremy

idk爲什麼它不起作用，但[this one]（http://jsfiddle.net/tDAqZ/）更好地說明了這種方法。 –

謝謝你，約瑟夫，你已經解決了我的問題，使我的一天！：D – Jeremy

你可以在你的代碼中使用$(window).width();，但我強烈建議您使用CSS3媒體查詢用於這一目的。

body{ 
    color: #222; 
} 
@media screen and (max-width: 940px) { 
    body{ 
     color: red; 
    } 
}

這裏有一個關於它的好arcticle：

http://www.alistapart.com/articles/responsive-web-design/

來源

2011-09-13 23:45:28 v42

是的，我一直在提及這篇文章。 – CAM

感謝您的建議，但我需要的適應性只是次要的，並且ie7不支持媒體查詢，這是我們大多數用戶使用的。 – Jeremy

這裏是我會做什麼......或者給它一些接近......如果我使用JS

$(function(){ 
         // on window resize fire this 
         $(window).resize(function(){ 
          //get window width 
          var wide = $(window).width(); 

          //log width 
          console.log(wide); 

          if (wide > 940) 
           { 
            console.log('wider'); 
           }        
          else (wide < 940) 
           { 
            console.log('not so wide'); 
           } 
         }); 


      });//END Doc Ready

來源

2011-09-13 23:53:18 CAM

修改下面的分辨率的CSS屬性

回答

相關問題