javascript - 修复 div 宽度 @media 修复 IE

Question

我有一个 div 设置为 100% 宽度，当页面以 1024 分辨率查看时，宽度应该从 100% 变为 1000px，我让它与@media 查询一起正常工作，并且在 FF、safari chrome 上工作正常。但是ie8及以下忽略了它，有没有其他方法可以让div在IE上以1024分辨率将宽度从100%更改为1000px？我用 jquery 试过这个，但没有用。

$(document).ready(function(){
if ($(window).width() < 1024) {
    $('#content')css('width','1000px')
} else {
    $('#content')css('width','100%')
};
}

Answer 1

媒体查询是 CSS3。表示 IE8 及更低版本不支持。但是看看这里，它为 IE 带来了对媒体查询的支持。

Answer 2

$(document).load($(window).bind("resize", changeWidth));

function changeWidth( e ) {
    if($(window).width()<1024)
    {
        $('#content').css('width','1000px');
    } else {
        $('#content').css('width','100%');
    }
}

jsFiddle

Answer 3

您可以使用此代码：

    $(window).resize(function () {
    var width = screen.width;
    var height = screen.height;
    if (width <= 1024) {
        //somecode
    } else {
        //somecode

    }
 });

然而，正如 Sven Bieder 所说，CSS 媒体查询比响应式设计更好。

Answer 4

为什么不直接在 CSS 中设置：

width: 100%;
max-width: 1000px;

我可以向你保证，它比任何 JS/jQuery 解决方案都高效得多。