给IE6、7、8 追加min/max媒体查询功能

发布日期:2015-09-19 23:09:33
我选择的给老版本 IE添加媒体查询支持的垫片脚本,仅支持追加 min/max-width 媒体
查询功能。还有很多类似的垫片脚本,可以追加很多媒体查询特性。但对于响应式设计
来说,Scott Jehl开发的 Respond.js使用简单、速度快,我一直用得很顺手。
Respond.js可以独立于 Modernizr 使用——只需将
其引入到需要的页面,然后就如其作者 Scott Jehl所说: “撬开 IE,击掌相庆。 ”
在将 Respond.js整合到 Modernizr之前,我们先来单独使用一下。将 Respond.js直接丢到
页面上(即将其插入到 Modernizr文件之后) ,然后检查看看它对 IE做了哪些处理。具体

做法是将 Respond.js保存到某个适当的路径,然后在 <head> 中引用:

给IE6、7、8 追加min/max媒体查询功能

<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-
scale=1" />
<title>And the winner isn't…</title>
<link href="css/main.css" rel="stylesheet" />
<script src="js/modernizr.js"></script>
<script src="js/respond.min.js"></script>
</head>
现在,只要在 IE8 中加载页面并调整浏览器窗口,就会看到我们的响应设计效果又回来
了(如下图所示) :

不错,我们现在给 IE添加了垫片脚本,使其可以支持 min-width 和 max-width ,但有
一个问题:垫片脚本在每一种浏览器中都会被加载——不论它们需要与否。一种解决办
法就是将脚本文件链接放置在 IE条件注释中,像下面这样:
<!--[if lte IE 8]>
<script src="js/respond.min.js"/></script>
<![endif]-->
你以前肯定见过条件注释。这是一种非常简便的方法,可用来为相应版本的 IE加载 CSS
或 JS文件(甚至是内容) 。其他浏览器会将这些代码看做注释而直接忽略。
在本例中,我们的条件注释是说: “如果你的浏览器版本低于或等于( lte )IE8,就执行
其中的代码。 ”
这样问题就解决了。但我们真要使用 IE特有的条件注释来污染我们的标签代码吗?那针
对其他浏览器的垫片脚本又该怎么办呢?还是得用 Modernizr呀。

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计