CSS媒体查询与JavaScript

Question

I have CSS3 Media Queries in my stylesheet to adjust for small and large screens. Mobile devices are not a concern for this project.

IE8 is the most used device by visitors to the website, and needs to be supported. I don't see IE8 supporting CSS3 Media Queries in my tests.

Is there any unforeseen consequence of converting the media queries to JavaScript? Can I keep both?

Media Queries:

@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;
    }
}

Proposed Change 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;
}

Proposed Change 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");
    }
}

I know this question is rooted in theory and perhaps not an appropriate fit for SO, but hopeful some of you may have thoughts before you vote to close ;)

Answer 1

There is a wonderful script that make media queries to work on older browser. Here is the link to Respond.js Hope this help!