响应式Web设计——第1章：HTML5、CSS3及响应式设计入门

直到最近，网站设计普遍还在使用固定宽度（如960像素），以期给所有终端用户带来较为一致的浏览体验。这种固定宽度设计在笔记本电脑上显示刚刚好，而在高分辨率显示器上却会在两边多出些空白。 但现在有了智能手机。苹果公司的iPhone第一次带给我们真正意义上易用的手机上网体验，之后其他公司纷纷效仿。现在人们可以舒服地使用手机上网冲浪，不用再像过去那样需要有“挑圆片” 世界冠军一样的灵活拇指，才能在小屏幕上看看网页。此外，消费者在家中上网时优先使用小屏幕设备（如平板电脑、上网本）正成为趋势。一个不争的事实是，使用小屏幕设备上网的人数正在以前所未有的速度增长。与此同时，27英寸和30英寸的大显示器也在快速普及。上网设备之间的尺寸差距与日俱增。 幸运的是，面对不断发展的浏览器和上网设备，我们有可行的解决方案。采用HTML5和CSS3技术的响应式网页设计，可以使网站兼容多种设备和屏幕。而这种方法的最佳之处，在于不需要什么服务器端方案，也完全可以实现。 本章内容 支持小屏幕设备的重要性 什么是移动网站设计 什么是响应式网页设计 优秀响应式网页实例赏析 视口和屏幕的区别 安装和使用修改视口的浏览器扩展程序 使用HTML5编写更简洁的标记 使用CSS3解决常见的设计问题 1.1　为什么智能手机很重要（而老版的IE不再重要） 虽然统计数据一般仅用作粗略参考，但来自gs.statcounter.com的统计数据却值得注意。从2010年7月到2011年7月的12个月中，全球手机浏览器的使用量从2.86%上升至7.02%。Internet Explorer 6的使用率则是从8.79%下降到3.42%。到2011年7月，Internet Explorer 7的使用率也降到了5.45% 。如果客户老是要求：“我们的网站必须兼容IE6和IE7！”你可以反驳说：“我们应该把精力花在更有价值的地方。”用手机上网的人比用台式机和笔记本中的IE6或IE7上网的人多多了。你可以听到全球前端开发工程师震耳欲聋的欢呼声！ 越来越多的人使用小屏幕设备上网，这些设备上的浏览器在设计时都考虑到了如何显示好现有网站。手机浏览器会将一个标准网页缩小至与设备可视区域（标准技术术语叫做“视口”）恰好匹配。然后用户在自己感兴趣的内容区域上放大浏览。这样看起来已经挺好了，那作为前端设计师和工程师的我们，为什么还要在这上面继续优化呢？ 在iPhone或Android手机上浏览的网页越多（如上图所示的那样），就越能深刻体会到为什么我们还需要继续优化。为了看清楚页面内容，需要不停地放大、缩小页面，然后为了看到视口外的文字，再左、右拖动，结果一不小心点了一个链接，你说讨厌不讨厌？我们当然可以做得更好！ 1.2　响应式设计一定是最佳选择吗 如果预算充足且形势需要，做一个真正的“手机版”网站是首选。这样就可以基于用户的设备、位置、连接速度，以及包括技术特性在内的其他变量来提供不同的内容、设计和交互。举一个实际的例子，假设有一家比萨连锁店，它有一个标准版的网站和一个手机版网站，手机版网站可以基于增强现实功能、用户当前GPS位置找到附近的比萨店。单独一个响应式设计远远不能支撑这种解决方案。 然而，不是所有项目都要求如此完美。大多数情况下，根据视口大小为用户提供与之匹配的视觉效果还是优先选择。例如，针对大多数网站，虽然从服务器端请求的内容相同，但我们可以根据不同设备改变网页的显示方式。在小屏幕设备上，可能是将次要内容放在主体内容之下，或者最坏情况下将其直接隐藏；也可能是将导航按钮改造成便于手指操作，而不是只提供一些需要精确瞄准才能点击的玩意儿！字体大小也应该恰到好处，便于阅读，不再需要不停地在屏幕上拖来拖去。同样，在迎合小屏幕的同时，我们也不想降低笔记本和台式机用户的浏览体验。既然我们意在兼容万物，那给那些配备1900像素甚至更大屏幕的用户提供一点额外改进又有何不可呢？简而言之，我们需要那些能响应各种设备大小的完美设计。 1.3　响应式网页设计的定义 响应式网页设计（RWD，Responsive Web Design）这个术语，由伊桑•马科特（Ethan Marcotte）提出。他在A List Apart发表了一篇开创性的文章，将三种已有的开发技巧（弹性网格布局、弹性图片、媒体和媒体查询）整合起来，并命名为响应式网页设计。这个术语还有一堆表示相同意思的其他叫法，如流式设计、弹性布局、塑料布局、流体设计、自适应布局、跨设备设计以及弹性设计。 上面仅列举了其中一部分！不过，正如马科特等人所说，真正的响应式设计方法不仅仅只是根据视口大小改变网页布局。相反，它是要从整体上颠覆我们当前设计网页的方法。以往我们先是针对桌面电脑进行固定宽度设计，然后将其缩小并针对小屏幕进行内容重排；现在我们应该首先针对小屏幕进行设计，然后逐步增强针对大屏幕的设计和内容。 一句话概括响应式网页设计 如果要用一句话概括响应式网页设计，我觉得它是针对任意设备对网页内容进行完美布局的一种显示机制。相反，如果需要根据不同设备提供特定的内容和功能，那就需要一个真正的“手机版”网站。这种情况下，手机版网站会提供与桌面版网站完全不同的用户体验。 1.4　为什么要在响应式设计上停滞不前 响应式网页设计能够根据视口变化控制页面文档流，但我们可以走得更远。HTML5提供了比HMTL 4更多且更加语义化的标签。CSS3的媒体查询是响应式设计不可或缺的组成部分，CSS3的其他功能给了我们前所未有的灵活性。我们将挣脱背景图像和复杂的JavaScript代码的羁绊，拥抱简洁的CSS3渐变、投影、字体、动画和变换。 在使用HTML5和CSS3制作响应式网页之前，让我们先来欣赏一些值得学习的实例，看看哪些高手正在使用新潮的响应式HTML5和CSS3绝技创造奇迹，而我们可以从他们的开创性杰作中学到些什么。 1.5　响应式网页设计示例 若要全方位测试你自己或别人的响应式网站，则需要针对每一种设备和不同的屏幕尺寸，分别准备不同的测试系统。尽管这是最完美的办法，但通过改变浏览器窗口大小其实就可以完成大多数测试。除此之外，还有很多第三方插件和浏览器扩展可供选择，通过它们可以将当前浏览器窗口或视口设定为指定像素。必要时，还可以自动将当前浏览器窗口或视口切换成为默认大小（如1024×768像素）。这样你就可以轻松地测试不同屏幕视口尺寸下的网站效果。 迷恋像素？忘了它吧！ 进入了响应式网页设计的教堂，就不要再迷恋像素（px）这个度量单位，因为大多数情况下我们不会用像素，而会使用相对度量单位（em或百分比）。相对单位更方便我们审查其他响应式设计作品，查看设计的变更之处。 1.5.1　下载视口调试工具 Internet Explorer用户请下载安装Microsoft Internet Explorer Developer Toolbar，下载地址如下：http://www.microsoft.com/download/en/details.aspx?id=18359 如果你在使用Safari，虽然ResizeMe（http://web.me.com/aaronholla/Safari_Extensions/ ResizeMe.html）的功能类似且免费，但我最爱Resize（http://resizeSafari.com）。 Firefox用户请下载Firesizer（https://addons.mozilla.org/en-US/firefox/addon/firesizer/），Chrome请下载Windows Resizer（https://chrome.google.com/webstore/detail/kkelicaakdan- hinjdeammmilcgefonfh）。 不喜欢使用浏览器扩展？还有一个方法：我写了个简单HTML页面来显示浏览器窗口的当前视口高度和宽度。页面用了jQuery框架，获取当前的视口的高度和宽度并显示出来。你可以在浏览器新标签页中打开这个页面，调整窗口大小，然后切回你要测试的页面查看效果。这个超级简单的“What size is my viewport page?”页面地址如下：http://benfrain.com/ easily-display-the-viewport-size-of-your-page-for-responsive-designs/ 视口和屏幕尺寸 视口和屏幕尺寸不是同一个概念。视口是指浏览器窗口内的内容区域，不包含工具栏、标签栏等。也就是网页实际显示的区域。屏幕尺寸指的是设备的物理显示区域。需要注意的是有些浏览器调整工具显示的尺寸包含浏览器的其他元素，诸如地址栏、标签栏和搜索栏，而有些工具则不是这样。在下面的截图中，实际的视口尺寸显示在右上角（1156×921像素），同时Firesizer插件将窗口尺寸显示在右下角（1171×1023像素）。 现在，我们带着所有需要的工具，开始鉴赏最好的响应式网站。启动你钟爱的浏览器，打开浏览器调整工具，访问http://thinkvitamin.com/ 。 如果你的视口宽度大于1060像素，你会看到如下图所示的布局： 如果你的视口宽度介于930像素到1060像素之间，你会看到如下图所示布局： 注意看logo旁边的主导航菜单是如何变化的。主内容区右侧的图标一个挨着一个排列，界面上的一切都合理可用，最重要的是，没有一样从屏幕上溢出。现在让我们再看看视口宽度小于880像素的效果，截图如下： 头部的效果基本没变，但注意右侧的侧边栏还是变窄了一些。图标排成了2行2列，同时文本块做了适当调整，其中的文本流相应地发生变化。 不过，将视口宽度减小到小于600像素，你就会发现一个重大的变化，如下图所示： 怎么样？整个侧边栏对我们的新视口做出了响应，网站最重要的内容区占据了整个浏览器窗口宽度。注意看头部的导航链接现在是水平排列的，而不是被放在logo的旁边。另外，logo本身的大小也做了调整。以上所有的这些变化有助于根据视口尺寸为用户创建更好的体验。 让我们来看看另一个例子：http://2011.dconstruct.org/。视口较宽时（大于1350像素）网站效果如下图所示： 请特别注意那9张图的排列格式。当你减小视口宽度时（小于960像素），注意看界面发生了什么变化。三行三列的图片排列方式变成了三行两列外加下方一行三列，如下图所示： 继续减小视口宽度，在小于720像素的时候我们会遇到另一个设计“断点”。头部导航链接转换成了带图片的导航区域，这为触屏导航提供了更好的操作区域： 继续减小视口宽度，当小于480像素时，图片排列方式又变成了第一行2张图片，第二行3张，第三行4张。这些图片的大小在视口宽度缩小至大约300像素时又发生了变化。下面的截图显示了其在iPhone上的效果： 1.5.2　在线创意源泉 推荐一个响应式设计创意收集网站：http://mediaqueri.es。虽然这里收集的网站并不是全部都采纳完整的响应式方法论，即先针对小视口进行设计，然后逐步针对大视口进行渐进增强支持。但就目前来看，响应式设计方法兴起的时间不长，再考虑到响应式网页设计的各种可能性，这里确实有很多能让我们汲取创意的范例。尽管调整视口大小来浏览网站能说明响应式网页设计的理念，但这没有展示出HTML5的优势。HTML5的优势事实上在幕后发挥。所以让我们将注意力转移到幕后，来了解一下HTML5的优秀之处。 1.6　为什么HTML5很优秀 在创建可以通过W3C标准验证的页面时，HTML5强调简化标签，仅链接那些我们必须的CSS、JavaScript和图片文件。智能手机用户只能使用有限的带宽访问我们的页面，而响应式设计的一个主要目标就是，网站不仅要对用户有限的视口做出响应，还要以最快的时间加载网页。虽然移除冗余的标签元素只能节省一点字节，但积少成多！ 较之上一个版本的HTML（HTML 4.0.1），HTML5进行了极大的改进，提供了许多新特性。前端开发工程师可能主要对HTML5的新语义元素感兴趣，这些新元素给搜索引擎提供了含义更加丰富的代码。HTML5也可以在表单提交等基本网页交互场景中对用户做出反馈，一般不再需要复杂的JavaScript表单处理流程。同样，这为我们的响应式设计来带来的好处就是，允许我们创建更加简洁和快速的代码。 1.6.1　省时省力 HTML文档的第一行都是使用Doctype（文档类型声明）开头。老实说，这段代码一般都是由代码编辑器自动生成或者是从模板文件中粘贴过来的（没人会真的手工敲出完整的HTML 4.01文档类型声明吧？）。标准的HTML 4.01网页的文档类型声明如下所示： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ TR/html4/loose.dtd"> 如今在HTML5中，则化繁为简： <!DOCTYPE html> 如前所述，我写页面的时候从来不会手工敲出文档类型声明，我猜你也不会。——那你嚷嚷半天有什么实际意义？ 不要着急，还得往页面中链接JavaScript或CSS文件呢。在HTML 4.01中，链接一个脚本文件的正确方法如下： <script src="js/jquery-1.6.2.js" type="text/javascript"></script> HTML5中变得更简单： <script src="js/jquery-1.6.2.js"></script> 如你所见，type属性不再是必需的。链接CSS文件与此类似。HTML5也接受非常松散的语法。如，<sCRipt SrC=js/jquery-1.6.2.js></script>和之前所举例子一样有效，尽管我们省略了脚本源文件地址两边的引号，而且标签和属性名大小写字母混用，但HTML5并不介意，这样的代码照样能够通过W3C的HTML5验证工具（http://validator.w3.org/）的验证。如果你在写代码时容易丢三落四，这或许是个好消息。如果你想从代码中剔除每一个可能多余的字符，这点尤其有用。在代码编写方面还有很多细节可以让我们的工作更加轻松从容，但我猜你一定期待HTML5更多的精彩内容。那就让我们来快速浏览一下HTML5新增的语义元素。 1.6.2　新增了语义化标签元素 制作标准的HTML页面时，头部和导航一般都是标配，如下所示： <div class="header"> <div class="navigation"> <ul class="nav-list"> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="About">About</a></li> </ul> </div> <!—end of navigation --> </div> <!—end of header --> 看看我们用HTML5如何实现： <header> <nav> <ul id="nav-list"> <li><a href="#" title="Home">Home</a></li> <li><a href="#" title="About">About</a></li> </ul> </nav> </header> 怎么样？对于表示每个结构化元素的毫无个性的<div>标签（虽然为应用样式加了class名），HTML5为我们提供了一些有语义的元素。页面中的一些通用结构体如头部和导航（后面还会看到更多）有了独立的标签。使用<nav>标签会使我们的代码变得更有语义，如同告诉浏览器，“嘿，这块内容就是导航”。这对我们来说是件好事，但更重要的是对搜索引擎来也是件好事。搜素引擎能比以前更好地理解我们的网页，并相应地评定网页内容。 在编写HTML页面时，我经常提醒自己，这些页面在最终发布到互联网上之前，将按流程交给负责后台开发的同事（你懂的，就是那些使用PHP、Ruby、.NET、ColdFusion等等语言的帅哥们）。为了和后台开发人员保持良好的协作关系，我通常都会给代码中的</div>结束标签添加注释，以确保其他人（也包括我自己）能够轻松地确定<div>元素在哪里结束。HTML5可以让我们省去大部分这样的工作。查看HTML5代码时，假如看到一个</header>结束标签，你会立即明白哪个标签结束了，不用注释。 以上我们只窥见了HTML5语义增强的一斑。先别激动，我们还要认识一位朋友。如果没有它，就没有网页设计的新时代，它就是CSS3。 1.7　CSS3为响应式设计和更多创新奠定了基础 如果你从20世纪90年代中期就开始从事网页设计，应该记得当时所有的设计都基于表格布局。而且，样式与内容是交织在一起的。CSS（层叠样式表）作为一种将设计与内容分离的方法被引入。网页设计师们花了一些时间才走进基于CSS设计的美丽新世界，诸如“CSS禅意花园”（http://www.csszengarden.com）这样的网站从视觉上形象地展示了基于CSS设计的网站所能达到的效果，为我们铺平了前进的道路。从那以后，CSS成为了定义网页表现层的标准方法，CSS 2.1是当前正式批准的CSS标准。CSS3尚未被正式批准，但这并不意味着它的大部分内容现在无法使用。W3C工作组的说明如下： CSS3是在CSS 2基础上按模块构建的，以CSS 2.1标准为核心。每个模块都会增加功能或是替换CSS 2.1标准中已有章节。CSS工作组的设想是新的CSS模块不会与CSS 2.1标准冲突，这些模块只会追加新功能，改进已有规定。 大部分W3C标准草案读起来（不可避免地）像法律条文。简单来说，CSS3是一种附加模块式构造，而不是大一统的标准。由于CSS3以CSS 2.1为核心，所以CSS 2.1的功能照样可以使用。不仅如此，某些相对成熟的CSS3模块（并不是所有模块都得到了相同程度的支持）今天也可以较为广泛地使用了，因此不必等待整个规范得到批准。 1.7.1　底线：CSS3不破坏任何东西 关于CSS3，最鼓舞人心的一点应该是在老版本浏览器中使用它们无法解析的属性，不会造成任何问题。它们（包括Internet Explorer 6、7、8）会欣然忽略那些无法解析的属性。这使我们能够为那些先进的浏览器进行渐进增强设计，同时为老版本浏览器提供合理的降级处理。 1.7.2　CSS3如何解决日常设计问题 我们来看一个在大多数项目中都会遇到的设计问题——给界面元素创建圆角效果，可能是设计选项卡式界面，也可能是给诸如头部这样的块状元素应用圆角。在CSS 2.1中可以使用滑动门技术（http://www.alistapart.com/articles/slidingdoors/）来实现，即将一张背景图片放在另一张后面。对应的HTML代码比较简单： <span>Box Title</span> 为了给<a>元素添加圆角背景，我们需要制作两张图片。第一张叫做headerLeft.png，15像素宽40像素高；第二张叫做headerRight.png，宽度要超过头部可能设定的最大宽度（本例中宽度为280像素）。两张图片合起来组成滑动门。当元素宽度增加时（<span>标签内的文字增加），背景图片会填满背景空间，这样就形成了一个普遍适用的圆角解决方案。下面是本例中的CSS代码： a { display: block; height: 40px; float: left; font-size: 1.2em; padding-right: 0.8em; background: url(images/headerRight.png) no-repeat scroll top right; } a span { background: url(images/headerLeft.png) no-repeat; display: block; line-height: 40px; padding-left: 0.8em; } Google Chrome浏览器（v16）中的效果如下： 上面的方法解决了设计问题，但却需要增加一个多余的标签（从语义上看<span>标签没有实际意义）和两次额外的服务器端HTTP请求（两张图片）来创建屏幕上的视觉效果。除此之外，我们还可以使用CSS“雪碧”（Sprite）技术，将两张图片合成一张，然后使用background-position属性来调整定位，虽然这样还可以节省一点带宽，但仍然不是一个灵活的方案。如果客户要求圆角更大一点怎么办？或者要求修改颜色怎么办？我们必须得重新修改图片。悲哀的是，作为前端设计师和工程师的我们，在CSS3出现以前，就身处这样的窘境中。女士们先生们，我已经看到了光明的未来，那是由CSS3塑造的未来！我们将上述的HTML代码简化成这样： Box Title CSS代码改为如下所示： a { float: left; height: 40px; line-height: 40px; padding-left: 0.8em; padding-right: 0.8em; border-top-left-radius: 8px; border-top-right-radius: 8px; background-image: url(images/headerTiny.png); background-repeat: repeat-x; } 下面的效果图展示了在同样的浏览器（Chrome v16）中呈现的CSS3版的圆角按钮效果： 在上面的代码中，先前的两张图片已被替换为一张沿x轴平铺的1像素宽图片。虽然图片只有1像素宽，但高度仍然是40像素，比任何可能出现在其中的元素都高。在使用图片作为元素背景时，一定要对其高度“高度注意”，以预防内容溢出。不幸的是，这样会产生更大的图片，需要更多带宽。尽管如此，和先前完全使用图片的解决方案不同的是，CSS3提供了border-radius及其相关属性来帮助我们设置圆角。客户想让圆角更平滑一点，比如改成12像素？没问题，只需要将border-radius的属性值改为12px，搞定！CSS3的圆角属性简单、灵活，并且Safari（v3+）、Firefox（v1+）、Opera（v10.5+）、Chrome（v3+）和Internet Explorer 9（及IE 10）都支持它。微软对IE 9能够支持这个属性得意洋洋（我希望你能感受到我在此处所表达的一丝讽刺），他们甚至专门设计了一个交互页面来演示使用border-radius属性能达到的各种效果。演示页面的地址如下：http://ie.microsoft.com/testdrive/html5/borderradius/default.html CSS3可以更进一步，不再需要渐变背景图片，而是使用浏览器渲染的效果。浏览器对这个特性的支持不是很好，但按照linear-gradient(yellow, blue)这个基本思路，任意元素的背景都可以用CSS3生成的渐变来渲染。 渐变可以设定为纯色，即传统的HEX颜色值（如#BFBFBF）；也可以使用任何一种CSS3颜色模式（更多详情请见第5章）。如果你想给老版本浏览器的用户设置替换渐变的纯色背景（否则他们看不到任何背景），如下所示的CSS代码可以给不支持渐变的浏览器提供一个纯色背景： background-color: #42c264; background-image: -webkit-linear-gradient(#4fec50, #42c264); background-image: -moz-linear-gradient(#4fec50, #42c264); background-image: -o-linear-gradient(#4fec50, #42c264); background-image: -ms-linear-gradient(#4fec50, #42c264); background-image: -chrome-linear-gradient(#4fec50, #42c264); background-image: linear-gradient(#4fec50, #42c264); linear-gradient属性会指示浏览器从第一个颜色值（即例子中的#4fec50）开始，渐变至第二个颜色值（#42c264）。 你可能注意到了，CSS代码中的background-image:linear-gradient属性使用不同前缀（例如-webkit-）重复了多次。这种写法允许不同的浏览器（包括-moz-代表的Mozilla Firefox，-ms-代表的Microsoft Internet Explorer等）厂商在发布正式版本之前之前，试验各自对CSS3新特性的实现，正式版本发布后就不再需要前缀。遵循样式表的层叠特性，我们将无前缀的代码放在最后，这样如果该特性可用，则会覆盖之前的声明。 1.8　看呐，不用图片 下面的截图展示了在同样的浏览器中完全使用CSS3制作的按钮效果: 图片版和纯CSS版之间的视觉差异微不足道，我想这点你应该同意。相较于使用图片，使用CSS3制作视觉效果能使我们的响应式设计更加简洁。而且，现代浏览器都能很好地支持渐变，唯一需要权衡是那些对渐变支持不怎么到位的浏览器，如IE 9以及更低版本的IE。 CSS3还带来了什么 刚才，我们欣赏了一个CSS3能帮助我们完成的日常工作的小例子。接下来，我们想尝尝开胃大菜，看看CSS3能带给我们什么美味。启动Safari或Chrome，访问http://www.panic.com/blog/。遗憾的是这个网页不是响应式设计，我们关心的区域是页面上方的那一排记事贴。把鼠标悬停在上面就可以看到它们浮起来。很帅吧？过去，这种增强效果一般都要靠笨重的Flash或者JavaScript实现。而现在则可以完全通过CSS3的变换来实现。使用CSS3制作动画比JavaScript或Flash更轻量级，更好维护，因此对响应式设计来说很理想。支持该特性的浏览器会显示效果，不支持的则装傻跳过，仅将其看做一张静态图片而已。 另一个优秀的CSS3动画范例是http://demo.marcofolio.net/3d_animation_css3。这个网站也不是响应式设计，但我们只关心其中用到的CSS技巧。先在Internet Explorer 9或者Firefox中看看（9.0版本以前，Firefox还不支持该CSS3模块），然后在Safari 5+或者Chrome 16+中看看效果。下面的截图效果未尽其意，如果你不准备亲自欣赏，那你得相信我的话——确实很赞： 酷炫的效果不仅仅只是Webkit核心的Safari和Chrome浏览器的专利。下面的例子在Firefox中也很炫，而且也是纯CSS3实现的：http://designlovr.com/ examples/dynamic_ stack_of_index_cards/。 显然，这些效果不是每个网站都必需的。它们是“渐进增强”的完美印证。在不支持特殊效果的浏览器里，用户只会看到静态的图片。但使用现代浏览器的用户则可以享受增强的视觉效果。虽然支持CSS3 3D变换的浏览器非常有限，但支持诸如文字阴影、渐变、圆角、RGBA颜色和多重背景图片等CSS3效果的浏览器则非常多，这为解决常年来令我们挠头的设计问题提供了灵活的方法。 1.9　HTML5和CSS3现在就能用吗 任何工具或技术都应该只在应用程序需要它的时候使用。做为前端工程师/设计师，我们的项目往往因为财务预算而受到时间和资源上的限制。 Internet Explorer 7和8都不支持HTML5新的语义元素，也不支持CSS3的新属性。如果一个网站的绝大多数用户都使用Internet Explorer 7或8，那花费精力将其做成基于HTML5和CSS3的响应式设计没有太大意义。但这并不意味着我们做不到。第9章在讨论跨浏览器响应问题时，会介绍一些刚刚涌现的新工具（因为它们是用于修补旧浏览器缺陷的，所以也被称为polyfill），用来修补那些不支持现代浏览器特性的老旧浏览器（主要是老旧的IE），但最好是从一开始就采取切实可行的方法来实现响应式设计。 以我的经验，一开始通常会问自己以下问题。 客户是否想支持互联网用户增长最迅猛的市场？如果想，那响应式方法就很适合。 客户是否想要最简洁、快速，且易于维护的代码？如果想，那响应式方法就很适合。 客户能否理解用户体验可以且本应该根据浏览器不同而不同？如果可以理解，那响应式方法就很适合。 客户是否要求设计效果在所有浏览器中都保持一致，包括IE 8以及更低版本？如果是，响应式设计就不适合。 该网站的当前或预期客户中，是否有百分之七十以上的人可能使用Internet Explorer 8或者更低版本？如果是，则响应式设计不适合。 再次重申，在预算允许的情况下，一个完全定制的“移动”版网站比响应式设计更适合。澄清一下，我将那些完全专注移动平台、为移动设备用户提供不同内容/体验的解决方案称之为“移动网站”。提倡响应式设计方法的人，不会都认为响应式设计在任何情况下都可以替代“移动网站”。 1.10　响应式网页设计不是灵丹妙药 虽然有点“爹爹给婆婆拜年——多此一举”，但还是有必要再重申一遍：使用HTML5和CSS3的响应式网页设计不是解决所有设计和内容服务问题的灵丹妙药。和以往的网页设计一样，项目的具体情况（即预算、目标用户以及网站用途）决定了其实现方式。根据我的经验，如果预算有限或开发一个完全定制的“移动网站”不太可行，那么响应式网页设计较之标准的固定宽度设计，总能提供更好的和无歧视的用户体验。 1.11　引导客户：网站不必在所有浏览器中表现一致 着手响应式设计之前，要跨越的最后一道障碍往往是思维定式。而且在某些情况下，这或许是最难克服的问题。例如，我经常被要求将已有的平面设计转换成使用HTML/CSS和jQuery构造的标准网页。依我的经验，平面设计师在创作设计图时，通常只会考虑固定宽度“桌面版”网站，考虑得更多的设计师真是罕有（我说罕有，意思是从来没见过）。接着我的职责就是在所有浏览器中以像素级别还原该设计。这项任务的最终成败取决于客户以及平面设计师的眼光。这种想法在有平面印刷设计背景的客户那里更是根深蒂固。他们的想法很好理解：客户签字认同了设计图，然后将其交给你、我这样的前端设计师/工程师，之后我们投入时间来确保最终代码在所有主流浏览器中的显示效果与原始设计尽可能接近——客户所见就是客户所得。 如果你尝试过让一个现代网页设计在Internet Explorer 6、7中，和在Safari、Firefox或Chrome等现代浏览器中的表现完全一致，你就会知道什么叫“蜀道之难，难于上青天”了。我经常会用整个项目近百分之三十的时间/预算来修复这些烂浏览器的固有缺陷和不足。这些时间应该用来为越来越多的现代浏览器用户开发增强体验或优化代码，而不应该浪费在为越来越少的Internet Explorer用户修补代码，绞尽脑汁地生造出圆角、透明图片、正确对齐的表单元素等效果。 遗憾的是，解决这个问题的唯一方法就是说服引导。客户需要明白为什么应该支持响应式设计，响应式设计的结果如何，为何最终设计不会也不应在所有视口和浏览器中表现一致。有些客户能理解，有些则不能。悲剧的是，有些客户仍然坚持要求在 Internet Explorer 6中也要有一模一样的圆角和投影效果。 当我接手一个新项目时，不论响应式设计是否适合，我都会试着给客户说明以下几点。 允许页面显示效果在老旧浏览器中有细微的差别，这样可以使代码更易维护，将来更新的成本也更低。 让页面元素在那些老旧浏览器（如Internet Explorer 8及更低版本）中表现一致会导致网站增加大量的图片。这会使网站变慢，制作成本变高，而且更难维护。 现代浏览器可以理解的简洁代码等同于更快速的网站。快速响应的网站在搜索引擎中的评级高于慢腾腾的网站。 使用老旧浏览器的用户越来越少，使用现代浏览器的用户越来越多——我们应该支持大多数！ 最重要的一点，支持现代浏览器，你就能尽情地享受响应式网页设计，它能响应不同设备的不同浏览器视口。 1.12　小结 本章，我们介绍了什么是响应式设计，并且欣赏了已有的优秀响应式设计范例。这些设计都是使用我们将在本书中讲解的工具和技术构建的。我们也已认同，以桌面电脑为中心的设计思想，应该转变成为未知设备而设计的思想。首先为最小的可视区域设计版式，然后在此基础上渐进增强用户体验。通过了解新的HTML5规范，我们确定HTML5的大部分内容可用，而且能够发挥其优势。换句话说，新的语义标签允许我们使用更简洁的代码创建比以往更具语义的网页。 实现响应式设计的关键技术是CSS3。在使用CSS3添加渐变、圆角、文字阴影和动画等视觉效果之前，首先要让它来扮演一个更重要的角色，那就是利用CSS3的媒体查询，针对特定的视口设置特定的CSS规则。下一章我们将开始“响应式网页设计”的探索之旅。