JavaScript從PX基於瀏覽器的大小改變CSS留值％

Question

我有一個div

#footer_container { 
    position: fixed; 
    width: 540px; 
    height: 45px; 
    margin-left: -270px 
} 

而且我想的CSS left值是瀏覽器的寬度left: 50%對瀏覽器的寬度> 1000像素和left: 500px < 1000px

我知道這可以很容易地完成與媒體查詢，但他們有問題，並不與IE8的工作。

有人可以用javascript做到這一點嗎？由於

Answer 1

#footer_container { 
    ... 
    left: 500px; 
} 
@media all and (min-width: 1000px) { 
    #footer_container {left: 50%;} 
} 

工程與CSS3兼容的瀏覽器調整，不需要window.onresize或類似的代碼自動更新或甚至任何代碼。

Answer 2

var left = ($(document).width() > 1000) ? "50%" : "500px" 
$("#footer_container").css("left", left) 

Answer 3

使用jQuery：

if ($("body").width() > 1000){ 
    $("#footer_container").css("left","50%"); 
} 
else{ 
    $("#footer_container").css("left","500px"); 
} 

見演示：http://jsfiddle.net/9ketB/

您可以添加一個監聽窗口$("window").resize()