响应式设计入门-09 解决跨浏览器问题.ppt

解决跨浏览器问题;本章内容;渐进增强与优雅降级;;前端的瑞士军刀：Modernizr;如何具体实施;;1.使用Modernizr辅助修正样式;;;2.使用Modernizr让老版本IE支持HTML5 元素;3.给IE6、7、8 追加min/max媒体查询功能;;继续为IE服务;4.使用Modernizr按需加载资源;;;按需加载资源的代码可以单独写在一个JavaScript 文件里。本例中将其命名为conditional.js，并将其与modernizr.js 和respond.min.js 一起放在js 文件夹。 这样整理之后，head部分看起来就是下面这个样子： head meta charset=utf-8 meta name=viewport content=width=device-width,initialscale=1.0,maximum-scale=1 / titleAnd the winner isnt…/title link href=css/main.css rel=stylesheet / script src=js/modernizr.js/script script src=js/conditional.js/script /head 注意已经移除了respond.min.js??因为现在该文件可以根据需要自动加载。;必要时将导航链接转换为下拉菜单;;接下来，在conditional.js 文件中追加如下代码： Modernizr.load([ { test: Modernizr.mq(only all), nope: js/respond.min.js }, {// 如果max-width 等于600px，则加载菜单转换脚本 test: Modernizr.mq(only screen and (max-width: 600px)), yep : [js/jquery-1.7.1.js, js/jquery.mobilemenu.js], complete : function () {// 资源完全加载后运行 $(document).ready(function(){ $(#mainNav).mobileMenu({ switchWidth: 600, //转换宽度 (用px 表示) topOptionText: Select a page, //第一个选项的内容 indentString: nbsp;nbsp;nbsp; //缩进嵌套选项的字符串 }); }); } } ]);;;;应对高分辨率设备;;理解最小设备像素比;