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

Answer 1

有一个很棒的脚本可以让媒体查询在旧浏览器上运行。 Here是Respond.js的链接希望这有帮助！

CSS媒体查询与JavaScript

1 个答案: