CSS 媒体查询与 JavaScript答案

【问题标题】：CSS Media Queries vs. JavaScriptCSS 媒体查询与 JavaScript
【发布时间】：2014-02-05 08:05:02
【问题描述】：

我的样式表中有 CSS3 媒体查询来调整大小屏幕。移动设备不是这个项目的关注点。

IE8 是网站访问者使用最多的设备，需要得到支持。在我的测试中，我没有看到 IE8 支持 CSS3 媒体查询。

将媒体查询转换为 JavaScript 有什么不可预见的后果吗？我可以两个都保留吗？

媒体查询：

@media only screen 
and (max-width : 800px) {
    body {
        font-size: 8pt;
        line-height: 1.4em;
        }
    #header h1 {
        width: 48% !important;
    }

    .inner {
        width: 95% !important;
    }

    #feature {
        height: 23em !important;
    }

    #feature .overlay {
        font-size: 120% !important;
        line-height: 1.3em !important;
    }

    #feature .overlay h1 {
        font-size: 150% !important;
        line-height: 1.2em !important;
    }
}

@media only screen 
and (max-width : 1024px) {
    body {
        font-size: 9pt;
        line-height: 1.4em;
        }
    #header h1 {
        width: 46% !important;
    }

    .inner {
        width: 95% !important;
    }
}

@media only screen 
and (min-width : 1600px) {
    body {
        font-size: 14pt;
        line-height: 1.4em;
    }

    .inner {
        width: 82% !important;
    }
}

建议更改 CSS：

body.small {
    font-size: 8pt;
    line-height: 1.4em;
    }
.small #header h1 {
    width: 48% !important;
}

.small .inner {
    width: 95% !important;
}

.small #feature {
    height: 23em !important;
}

.small #feature .overlay {
    font-size: 120% !important;
    line-height: 1.3em !important;
}

.small #feature .overlay h1 {
    font-size: 150% !important;
    line-height: 1.2em !important;
}


body.medium {
    font-size: 9pt;
    line-height: 1.4em;
    }
.medium #header h1 {
    width: 46% !important;
}

.medium .inner {
    width: 95% !important;
}


body.highdef {
    font-size: 14pt;
    line-height: 1.4em;
}

.highdef .inner {
    width: 82% !important;
}

建议更改 JavaScript：

$(document).ready( function(){
    check_dimensions();
    $(window).on( "resize", function(){
        check_dimensions();
    });
});

function check_dimensions(){
    var outer_width = $(this).outerWidth();

    $("body").removeClass();
    if ( outer_width >= 1600 ){
        $("body").addCass("highdef");
    } else if ( outer_width <= 800 ){
        $("body").addClass("small");
    } else if ( outer_width > 800 && outer_width <= 1024 ){
        $("body").addClass("medium");
    }
}

我知道这个问题源于理论，可能不适合 SO，但希望你们中的一些人在投票结束之前可能有想法;)

【问题讨论】：

只有像 ie10 或 ie8 这样的带有 chrome 框架等的现代浏览器才支持 css3。我倾向于转换为 jquery 。
你可以试试这个库：code.google.com/p/css3-mediaqueries-js。将它包含在您的 javascript 中并像往常一样编写您的 css3 媒体查询。支持IE5+
你说得对 IE8 中的媒体查询：caniuse.com/css-mediaqueries

标签： javascript jquery css media-queries

【解决方案1】：

有一个很棒的脚本可以让媒体查询在旧版浏览器上工作。 Here 是 Respond.js 的链接希望对您有所帮助！

【讨论】：