javascript - CSS 媒体查询与 JavaScript

Question

我的样式表中有 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，但希望你们中的一些人在投票关闭之前有想法 ;)/p>

Answer 1

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