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

解决跨浏览器问题 本章内容 渐进增强和优雅降级之间的根本区别 如何让老版本Internet Explorer 支持响应式设计 如何使用Modernizr 按需加载CSS 文件 如何使用Modernizr 按需加载JavaScript 补丁文件 如何将超长导航列表在小视口中转换为选择菜单 如何为高分辨率（视网膜）显示屏提供匹配图片 渐进增强与优雅降级 “渐进增强”和“优雅降级”是处理多浏览器支持的两种方法论。 优雅降级指的是为现代浏览器制作网站，然后保证为某些老版本浏览器提供基本可用的体验。 渐进增强与优雅降级恰好相反。渐进增强以恪守Web 标准的标签为基础，意味着它在所有浏览器中均可用。然后通过CSS 样式和必要的JavaScript 来为更先进的浏览器提供渐进式的增强体验。 目前作者个人的态度是，针对全新制作的网站，要确保其在最新版本的IE（编写本书时最新版本是IE9）以及前一个版本（IE8）中效果完美。而针对老版本IE 的布局和样式调整则由于需要额外的时间，所以另行商议。 前端的瑞士军刀：Modernizr Modernizr是一个用于检测浏览器功能的开源JavaScript库。 从实际操作来看，Modernizr 默认做的事很少，除了（在你选择的情况下）给不支持HTML5标签的浏览器如IE6、7、8 追加一点由Remy Sharp 开发的HTML5 垫片脚本，使其可以识别aside、section等 HTML5 元素之外，它主要做的就是浏览器“功能检测”。 如何具体实施 第一步，下载Modernizr（）。 接下来，将文件保存在某个适当位置（例如根目录下的js 文件夹中） 然后在页面的head中调用： head …… script src=js/modernizr.js/script /head 使用了Modernizr 之后，再通过Firebug 或类似开发工具查看页面源代码时，就会看到HTML 标签上追加了一堆不同的类名。在Firefox v9.01 中查看的示例效果如下： html class=js flexbox geolocation postmessage indexeddb history websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage applicationcache lang=en 这样就可以区别具体的浏览器，告知我们它检测了那些特性，其中该浏览器支持哪些，不支持哪些（对不支持的特性，对应的类名前有no-前缀）。基于此我们就可以做两件事：在CSS 文件中逐个特性地修正样式，以及按需加载额外的CSS 或JS文件。 1.使用Modernizr辅助修正样式 例如，页面在支持3D 变形的浏览器中效果正常，在不支持该特性的浏览器中则仅做了一个简单的悬停效果。现在，无论浏览器是否支持3D 变形，我们在页面上都有一段备注告知用户：该页面效果需要3D 变形的支持。 使用 Modernizr 追加的额外类名，就有办法仅在不支持3D 变形特性的浏览器中显示备注信息了。 首先将备注（class=note）设置为默认不显示： .note { display: none; } 这意味着支持3D 变形特性的浏览器不会看到备注信息。 接下来的规则使用Modernizr 追加的额外类名来为不支持3D 变形的浏览器显示备注： .no-csstransforms3d .note { display: block; } 2.使用Modernizr让老版本IE支持HTML5 元素 选择一个Modernizr的版本，按前面的步骤加载到页面中，就不用再做什么了。我不用再做什么。 因为Modernizr 使老版本IE 可以识别HTML5 的结构化元素，所以之前的很多标准CSS 样式现在都可以识别了，页面呈现出了它应有的样子。 3.给IE6、7、8 追加min/max媒体查询功能 ——“我选择的给老版本IE 添加媒体查询支持的垫片脚本，仅支持追加min/max-width 媒体查询功能。还有很多类似的垫片脚本，可以追加很多媒体查询特性。但对于响应式设计来说，Scott Jehl 开发的Respond.js 使用简单、速度快，我一直用