html5shiv.js 和 respond.min.js 的作用與說明。


 

這兩個 JS 算是前端開發 必配置文件,不要問,為什么,因為國內的IE8用戶太強大了!!!

(內容全是來源於網絡文章整理:)

一、做頁面開發時我們基本都會需要解決的問題:

    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 瀏覽器的版本小於 IE9 時將讀取 以下 .js 文件,並解析它。

注意:國內用戶請使用國內相對穩定資源庫(Google 資源庫在國內不穩定)

   有的項目客戶現場肯定都是內網環境,外網引入,還是不行的。最簡單的方法,還是把這兩個文件下載下來,放到自己本地了。

 

下載地址respond.min.js / respond.js下載

     html5shiv.min.js / html5shiv.js下載

 

三、代碼說明:

        以下等等都是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 featureoperator, 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地址http://www.bootcdn.cn/

 

 

希望可以幫助到你。

by不言謝。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM