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来兼容低版本媒体查询，要在页面中写
<!--[if Ite IE 8]> <script src="respond.js"></script> <![endif]-->
但是当我们使用了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实战》王永强 译
网友评论