浏览器不支持CSS3Media Query怎么办？

html-css016

浏览器不支持CSS3Media Query怎么办？,第1张

IE6~8不支持CSS3 Media Query，需要借助respond.js插件。

respond.js插件下载地址：https://www.developgeek.com/plus/list.php?tid=62

demo.css 样式文件

html,body {

    height: 100%

}

@media only screen and (min-width: 480px){

    body {

        background: yellow

    }

}

@media only screen and (min-width: 640px) and (max-width: 1024px) {

    body {

        background: green

    }

}

@media screen and (min-width: 1024px){

    body {

        background: blue

    }

}

respond.js demo实例

<!doctype html>

<html>

<head>

    <meta charset="UTF-8">

    <title>HTML5-响应式布局--respond.js-言成科技&HTML5学堂</title>

    <link rel="stylesheet" type="text/css" href="demo.css" />

    <script src="respond.min.js"></script>

</head>

<body>

    <div class="wrap" id="con">

    让IE6~8支持响应式布局——言成科技&HTML5学堂

    </div>

</body>

</html>

注意：respond.min.js或者respond.src.js都可以使用，在上面给出的下载地址中下载即可。

IE6的显示效果

Tips：IE7-8的显示效果也是没有问题的，在此就不贴图处理了

html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

官方网站： http://css3pie.com/

演示地址： http://css3pie.com/demos/gradient-patterns/

1.兼容border-radius

2.阴影效果

3.部分 CSS3 的效果，如 多张背景图，border-image，背景颜色渐变效果

4.png 图片透明效果