前端开发必配置 html5shiv.js和respond.min.js的作用说明(bootstrap做IE低版本兼容)
bootstrap做IE低版本兼容时需要用到这两个插件
一、做页面开发时我们基本都会需要解决的问题
1、解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
2、让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
由于IE6/IE7/IE8还有很大一部分用户，为了让网站浏览者都能正常的访问HTML5网站，故这两种问题还是需要解决的，
二、解决方案很简单：在head标签里添加如下代码就行了
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->三、代码说明
以下等等都是IE专门提供的一种语法，只有IE能识别运行，其他浏览器只会作为注解。
<!--[if !IE]> 除IE外都可识别 <![endif]--> <!--[if IE]> 所有的IE可识别 <![endif]--> <!--[if IE 6]> 仅IE6可识别 <![endif]--> <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--> <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--> <!--[if IE 7]> 仅IE7可识别 <![endif]--> <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--> <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--> <!--[if IE 8]> 仅IE8可识别 <![endif]--> <!--[if IE 9]> 仅IE9可识别 <![endif]-->
| 项目 | 范例 | 说明 |
|---|---|---|
| ! | [if !IE] | The NOT operator. This is placed immediately in front of the feature, operator, or subexpression to reverse the Boolean meaning of the expression. NOT运算符。这是摆立即在前面的功能，操作员，或子表达式扭转布尔表达式的意义。 |
| lt | [if lt IE 5.5] | The less-than operator. Returns true if the first argument is less than the second argument. 小于运算符。如果第一个参数小于第二个参数，则返回true。 |
| lte | [if lte IE 6] | The less-than or equal operator. Returns true if the first argument is less than or equal to the second argument. 小于或等于运算。如果第一个参数是小于或等于第二个参数，则返回true。 |
| gt | [if gt IE 5] | The greater-than operator. Returns true if the first argument is greater than the second argument. 大于运算符。如果第一个参数大于第二个参数，则返回true。 |
| gte | [if gte IE 7] | The greater-than or equal operator. Returns true if the first argument is greater than or equal to the second argument. 大于或等于运算。如果第一个参数是大于或等于第二个参数，则返回true。 |
| ( ) | [if !(IE 7)] | Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. 子表达式运营商。在与布尔运算符用于创建更复杂的表达式。 |
| & | [if (gt IE 5)&(lt IE 7)] | The AND operator. Returns true if all subexpressions evaluate to true AND运算符。如果所有的子表达式计算结果为true，返回true |
| | | [if (IE 6)|(IE 7)] | The OR operator. Returns true if any of the subexpressions evaluates to true. OR运算符。返回true，如果子表达式计算结果为true。 |
html5shiv.js 说明： 解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
respond.min.js说明： 让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
关于我们解决方案里用的两个JS文件地址，网上也有很多。不想用这个的可以自己再找一下别的cdn地址。
这里可以查到bootstrap的其他CDN地址https://www.bootcdn.cn/
注意几点
1、需要启动本地服务器（localhost），不能使用普通本地的url地址（file://开头）；
2、需要外部引入CSS文件，将CSS样式书写在style中是无效的；
3、由于respond插件是查找CSS文件，再进行处理，所以respond文件一定要放置在CSS文件的后面
4、另外，虽然把respond放置在head里还是在body后面都能够实现，但是建议放置在head中（具体原因在下面的文档提示中有提到）
5、最好不要为CSS设置utf-8的编码，使用默认（原因详见下面的文档提示部分）
6、越早的引入respond.js文件，也就越可能避免IE下出现的闪屏。
7、不支持嵌套的媒体查询
8、utf-8的字符编码对respond.js文件的运行有影响
官方API原文：if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.
基本含义就是：utf-8格式的CSS文件字符编码会对插件造成影响。
但是在我使用IE6-8进行测试的时候，都能够正常显示（无论是在css文件中增加charset设置还是在link标签中增加charset设置）。因此，并不是太清楚这个位置bug的含义。
9、跨域可能会出现闪屏（还没有测试，具体情况不详）
到此这篇关于前端开发必配置 html5shiv.js和respond.min.js的作用说明的文章就介绍到这了,更多相关html5shiv.js和respond.min.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
当我们谈论面向对象编程时,最难理解的事情之一就是静态属性与实例属性的概念,尤其是当我们试图在静态类型的基础上进行动态语言类型化时,在本文中,我将主要介绍一下如何使用TypeScript在接口中定义静态方法,需要的朋友可以参考下2023-10-10
这篇文章主要介绍了JS实现获取数组中最大值或最小值功能,结合实例形式总结分析了javascript获取数组最大值与最小值的三种常见操作技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了javascript中函数的写法 ,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-10-10
在前端开发中，有时候我们需要判断一个元素是否在可视区域内，本文主要介绍了js如何对元素可视区域进行判定，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
这篇文章主要为大家详细介绍了JS实现拖动模态框案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了js转换对象为xml的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
Javascript函数中的参数对象arguments是个对象，而不是数组。但它可以类似数组那样通过数字下表访问其中的元素，而且它也有length属性标识它的元素的个数。2015-06-06
在C#中打开word文档其实不算太难，方法也比较多,用javascript怎么打开呢？其实，也不难2012-04-04
添加一个以前写的table的spliter给大家...2007-01-01
虽然之前写过不少的javascirpt的脚本，但是对冒号:却不甚了了，感觉即陌生又熟悉，没办法老毛病又犯了，不把问题搞清楚那个(：)2009-06-06
最新评论