解决@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

转载于:https://www.cnblogs.com/huanglibin/p/4788370.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值