Modernizr.js

modernizr用来干什么的？当你使用html5和css3时，它能自动兼容老版本的浏览器，使老版本浏览器支持html5。还能保证新浏览器渐进增强的用户体验！下载modernizr

它最主要的功能就是浏览器“功能检测”，当你使用了modernizr后，开发工具查看会发现在标签html上追加了一堆类名……

<html class="js flexbox geolocation postmessage indexeddb history websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage applicationcache -webkit-">

它就是告知我们检测了哪些特性，其中浏览器不支持的用前缀no-表示，这样我们可以知道这个浏览器不支持3d效果，我们就可以为不支持此特性的浏览器加一个提示信息：

.romptMessage{display:none;} //在支持的浏览器是不显示此信息.no-csstransforms3d .romptMessage{display:block}//在不支持的浏览器下显示提示信息 <p class="romptMessage">浏览器不支持3d效果，请换新版本浏览器查看</p>

使用modernizr按需加载资源：

比如我们要添加responed.js来兼容低版本媒体查询，要在页面中写

但是当我们使用了modernizr，就可以更简单的来引用

Modernizr.load({ //调用

  test:Modernizr.mq('only all'), //检测浏览器是否支持媒体查询 .mq(media queries)

  nope:'respond.js' //如果不支持则加载这个js，还可以一次加载多个文件，

比如:nope:['respond.js','extra.css']

  },{ //媒体查询可以了以后

test : Modernizr.mq(' only screen and (max-width:600px) '), //如果浏览器窗口最大宽度是600px时，

yep : ['jquery.mobilemenu.js']   //则加载这个js，此js是能够将导航链接转换为下拉菜单，用于移动端。

complete : function(){ //资源加载，运行如下代码，下面代码就写刚才加载进来的js的调用信息

  $(document).ready(function(){

  $("#mainNav").mobileMenu({ //导航的id，去调用这个函数。

  ……mobilemenu.js的一些参数

  })   }) }   })

·更多信息请关注 modernizr github地址

来源：《Responsive Web Design with HTML5 and CSS3 》 by auto : Ben Frain， github

中文名《响应式web设计html5与css3实战》王永强译

Modernizr.js

推荐阅读更多精彩内容