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