Modernizr.js

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

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

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

.romptMessage{display:none;} //在支持的浏览器是不显示此信息.no-csstransforms3d .romptMessage{display:block}//在不支持的浏览器下显示提示信息                                                

浏览器不支持3d效果，请换新版本浏览器查看

使用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实战》王永强 译