码迷,mamicode.com
首页 > Web开发 > 详细

html5shiv.js 和 respond.min.js 的作用与说明。

时间:2020-01-26 17:35:07      阅读:96      评论:0      收藏:0      [点我收藏+]

标签:html   客户   width   googl   com   ssi   not   placed   布尔   

 

这两个 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不言谢。

 

html5shiv.js 和 respond.min.js 的作用与说明。

标签:html   客户   width   googl   com   ssi   not   placed   布尔   

原文地址:https://www.cnblogs.com/byx1024/p/12234334.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!