CSS媒體查詢與JavaScript

Question

我的樣式表中有CSS3 Media Queries，可針對大屏幕和小屏幕進行調整。 移動設備不是此項目的關注點。

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，但是希望你們中的一些人在投票結束之前可能有想法;)

Answer 1

有一個很棒的腳本，可以使媒體查詢在較舊的瀏覽器上運行。 這是Respond.js的鏈接，希望有幫助！