前端开发必配置 html5shiv.js和respond.min.js的作用说明(bootstrap做IE低版本兼容)

更新时间：2023年05月23日 10:58:04 作者：小川

这篇文章主要介绍了前端开发必配置 html5shiv.js和respond.min.js的作用说明,需要的朋友可以参考下

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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

简单的渐变轮播插件
本文主要介绍了简单的渐变轮播插件，具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
javascript数组组合成字符串的脚本
javascript数组组合成字符串的脚本...
2007-11-11
详解堆的javascript实现方法
最近因为工作需要，要深入的学习JavaScript，发现如果囫囵吞枣印象就是不深刻，自己去练习一下才能慢慢有点感觉。本文主要是详解堆的javascript实现方法，另外堆排序对我们来说太耳熟而又少用的情况下，本文当作一次复习。感兴趣的朋友们下面来一起看看吧。
2016-11-11
微信小程序调用摄像头隐藏式拍照功能
这篇文章主要介绍了微信小程序调用摄像头隐藏式拍照功能，本文给大家带来了解决方法、官网代码和小编写的比较完整代码,需要的朋友可以参考下
2018-08-08
利用iscroll4实现轮播图效果实例代码
iScroll 4 这个版本完全重写了iScroll这个框架的原始代码。这个项目的产生完全是因为移动版webkit浏览器（诸如iPhone，iPad，Android 这些系统上广泛使用）。下面这篇文章主要介绍了利用iscroll4实现轮播图效果的方法教程,需要的朋友可以参考下。
2017-01-01
JS实现队列的先进先出功能示例
这篇文章主要介绍了JS实现队列的先进先出功能,结合实例形式分析了基于JS的队列初始化、赋值等相关操作技巧,需要的朋友可以参考下
2017-05-05
温习Javascript基础语法之词法结构
javascript是一门简单的语言，也是一门复杂的语言。这篇文章主要介绍了温习Javascript基础语法之词法结构的相关资料,需要的朋友可以参考下
2016-05-05
微信小程序自定义Modal弹框
这篇文章主要为大家详细介绍了微信小程序自定义Modal弹框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-07-07
JS获取IMG图片高宽的简单实例
下面小编就为大家带来一篇JS获取IMG图片高宽的简单实例。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
这篇文章主要介绍了JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支,结合实例形式总结分析了JS页面加载事件，数组操作，DOM节点操作，循环和分支所涉及的相关事件、函数及操作注意事项,需要的朋友可以参考下
2019-07-07