解决@media screen （自适应）IE浏览器不兼容问题

 

1、解决兼容性问题

(1)页面最顶部必须定义：<!DOCTYPE html>

(2)点击：下载 respond.js 文件

(3)引入<script src="respond.js"></script>；respond.js必须在样式表之后引用：

respond-js

(4)页面必须在服务器环境中运行，直接打开用不了

 

2、使用css3判断窗口大小设置不同样式：

 

举个例子：

/*宽度小于500px时；背景为红色*/

@media screen and (max-width:500px){

body{background:red;}

}

 

/*宽度在500px-800px之间时候；背景为蓝色*/

@media screen and (min-width: 500px) and (max-width: 800px){

body{background:blue;}

}

 

/*宽度大于800px时；背景为绿色*/

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

body{background:green;}

}

 这里要注意，这里的样式必须是引用的外部样式，直接写在页面里的不可以

可以点击：实例下载 ，有我做好并测试通过的实例。

出自：http://www.bjishu.com/using-ie-css3htc-make-compatible-response-page

posted @ 2015-09-07 11:12  hlb  阅读(2360)  评论(0)  编辑  收藏  举报