Question

我将div设置为100％宽度，当页面以1024分辨率查看时，宽度应该从100％变为1000px，我使用@media查询正常工作并且在FF上运行正常，safari chrome 。但ie8及以下忽略了它，还有其他任何试图让IE在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及更低版本不支持的方式。但请看一下here，它为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 Media Queries比响应式设计更好。

Answer 4

为什么不在CSS中设置它：

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

它可以比任何JS / jQuery解决方案更有效率，我可以向你保证。

修复IE的div宽度@media修复

4 个答案: