前端開發(fā)必配置 html5shiv.js和respond.min.js的作用說明(bootstrap做IE低版本兼容)

更新時(shí)間：2023年05月23日 10:58:04 作者：小川

這篇文章主要介紹了前端開發(fā)必配置 html5shiv.js和respond.min.js的作用說明,需要的朋友可以參考下

bootstrap做IE低版本兼容時(shí)需要用到這兩個(gè)插件

一、做頁面開發(fā)時(shí)我們基本都會需要解決的問題

1、解決ie9以下瀏覽器對html5新增標(biāo)簽的不識別，并導(dǎo)致CSS不起作用的問題。

2、讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。

由于IE6/IE7/IE8還有很大一部分用戶，為了讓網(wǎng)站瀏覽者都能正常的訪問HTML5網(wǎng)站，故這兩種問題還是需要解決的，

二、解決方案很簡單：在head標(biāo)簽里添加如下代碼就行了

<!--[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能識別運(yùn)行，其他瀏覽器只會作為注解。

????????<!--[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]-->

項(xiàng)目	范例	說明
!	[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運(yùn)算符。這是擺立即在前面的功能，操作員，或子表達(dá)式扭轉(zhuǎn)布爾表達(dá)式的意義。
lt	[if lt IE 5.5]	The less-than operator. Returns true if the first argument is less than the second argument. 小于運(yùn)算符。如果第一個(gè)參數(shù)小于第二個(gè)參數(shù)，則返回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. 小于或等于運(yùn)算。如果第一個(gè)參數(shù)是小于或等于第二個(gè)參數(shù)，則返回true。
gt	[if gt IE 5]	The greater-than operator. Returns true if the first argument is greater than the second argument. 大于運(yùn)算符。如果第一個(gè)參數(shù)大于第二個(gè)參數(shù)，則返回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. 大于或等于運(yùn)算。如果第一個(gè)參數(shù)是大于或等于第二個(gè)參數(shù)，則返回true。
( )	[if !(IE 7)]	Subexpression operators. Used in conjunction with boolean operators to create more complex expressions. 子表達(dá)式運(yùn)營商。在與布爾運(yùn)算符用于創(chuàng)建更復(fù)雜的表達(dá)式。
&	[if (gt IE 5)&(lt IE 7)]	The AND operator. Returns true if all subexpressions evaluate to true AND運(yùn)算符。如果所有的子表達(dá)式計(jì)算結(jié)果為true，返回true
\|	[if (IE 6)\|(IE 7)]	The OR operator. Returns true if any of the subexpressions evaluates to true. OR運(yùn)算符。返回true，如果子表達(dá)式計(jì)算結(jié)果為true。

html5shiv.js 說明：解決ie9以下瀏覽器對html5新增標(biāo)簽的不識別，并導(dǎo)致CSS不起作用的問題。

respond.min.js說明：讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢。

關(guān)于我們解決方案里用的兩個(gè)JS文件地址，網(wǎng)上也有很多。不想用這個(gè)的可以自己再找一下別的cdn地址。

這里可以查到bootstrap的其他CDN地址https://www.bootcdn.cn/

注意幾點(diǎn)

1、需要啟動本地服務(wù)器（localhost），不能使用普通本地的url地址（file://開頭）；

2、需要外部引入CSS文件，將CSS樣式書寫在style中是無效的；

3、由于respond插件是查找CSS文件，再進(jìn)行處理，所以respond文件一定要放置在CSS文件的后面

4、另外，雖然把respond放置在head里還是在body后面都能夠?qū)崿F(xiàn)，但是建議放置在head中（具體原因在下面的文檔提示中有提到）

5、最好不要為CSS設(shè)置utf-8的編碼，使用默認(rèn)（原因詳見下面的文檔提示部分）

6、越早的引入respond.js文件，也就越可能避免IE下出現(xiàn)的閃屏。

7、不支持嵌套的媒體查詢

8、utf-8的字符編碼對respond.js文件的運(yùn)行有影響

官方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進(jìn)行測試的時(shí)候，都能夠正常顯示（無論是在css文件中增加charset設(shè)置還是在link標(biāo)簽中增加charset設(shè)置）。因此，并不是太清楚這個(gè)位置bug的含義。

9、跨域可能會出現(xiàn)閃屏（還沒有測試，具體情況不詳）

到此這篇關(guān)于前端開發(fā)必配置 html5shiv.js和respond.min.js的作用說明的文章就介紹到這了,更多相關(guān)html5shiv.js和respond.min.js內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: