国内外专业Web设计师、开发者联袂力荐 响应式Web理论派转型实践派利器

推荐语

我一直认为响应式不是万能的，阅读完本书你可以了解到响应式 Web的精妙所在，你会更加理解什么情况下可以并且应该使用它。这本书从响应式每个部分的原理讨论出发，并手把手地从设计到编码给出每一步的细节，相信每一位读者都能从中获益。
鬼道 /徐凯天猫技术专家 ,《跨终端 Web》作者
在移动互联网时代，响应式 Web是每个前端工程师所必备的技能之一。这本书不仅有原理的介绍，而且还讲解了各种场景下响应式页面的实现方法，每个案例都很实用。响应式 Web的体验是否优秀，在很大程度上取决于设计，难能可贵的是，这本书作为一本技术书籍对响应式设计也花了部分篇幅进行讲解。
赵文博奇虎 360奇舞团技术经理
在设计师的眼里，移动互联的发展从某种意义上来说就是交互媒介和屏幕适配的更新和多样化。我们的 Web产品设计面临着一场智能化的革命，因为用户对产品的要求已经今非昔比：从光标到指尖；从 PC到移动设备；从横屏到竖屏……这种种碎片化的局面一度让设计师苦不堪言，甚至无从下手。因此，响应式设计技术的出现无论对设计师还是开发者来说都是一个福音，我们现在真正需要的就是抓住这个机会，利用这个划时代的技术打造出更适合移动互联用户的 Web产品。因此在我看来，这样一本著作的出现实在是一场“及时雨”，它告诉了我们设计师和开发者如何更好地合作，以及更充分地利用这个“利器”打造更完美的 Web产品。
赵大羽智捷课堂联合创始人，UE/UI专家，高级讲师
惊叹一种优雅的代码可产生多种精美绝伦的页面。在资源有限的前提下，响应式 Web设计为我们提供了支持业务快速迭代可行性的解决方案。本书不仅详解了响应式设计的概念，还引入了大量的实战技巧，这使得设计师和开发者可以非常容易地应用响应式 Web设计。推荐涉及移动设计方面业务的读者阅读本书，让我们一起享受响应式 Web设计带来的乐趣吧！
张鹏王府井百货集团技术总监

推荐序

在互联网大潮的背景下， PC端加速向移动端迁移： 2012年 12月底，我国网民规模达到 5.64亿，互联网普及率为 42.1%，其中手机用户占网民总数的 74.5%。2014年，智能手机全球出货量达 12.86亿部，同比增长 28.0%。截至 2015年 1月，全球接入互联网的移动设备总数超过 70亿台，几乎平均全球人手一台。作为最主要的移动终端设备，智能手机仍然保持高速增长，皮尤研究中心（Pew Research Center）近日对调研公司 comScore今年 1月份的流量数据进行了分析，评出了美国最受欢迎的 50大新闻网站。这些数据显示，在这 50大新闻源中，大部分网站的移动流量已超越 PC流量。随着越来越多的智能移动设备加入到互联网中来，移动互联网不再是独立的小网络了，而是成为 Internet的重要组成部分。各种移动设备的发展导致每种移动设备都希望拥有适合自身的网页。但是 Web设计和开发几乎无法追赶上设备与分辨率的更新，但是如果不能满足各种设备下用户的使用，就会流失掉用户群，这可谓是一个巨大的挑战。
2010年 5月，伊桑 ·马科特（ Ethan Marcotte）在 A List Apart写了一篇开创性的文章，题为 Responsive Web Design，文中援引了响应式建筑设计的概念— —响应式架构（ responsive architecture），并提出：物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构，还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产“智能玻璃”：当室内人数达到一定阈值时，这种玻璃可以自动变为不透明，确保隐私。
如果将这个思路延伸到 Web设计领域，我们就得到了一个全新的概念——响应式 Web设计。我们何必要为每个设备各自打造一套设计和开发方案？和响应式建筑相似， Web设计同样应该做到根据不同设备环境自动响应及调整。马科特利用三种已有的工具：流动布局、媒体查询和弹性图片创建了一个在不同分辨率屏幕下都能漂亮展示的网站。
响应式设计的核心正是使用百分比布局创建流动的弹性界面，使用媒体查询来限制元素的变动范围。响应式 Web设计的理念是：页面的设计与开发应根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。无论用户正在使用笔记本还是 iPad，页面都应该能够自动切换分辨率、图片尺寸及相关脚本的功能等，以适应不同设备。换句话说，页面应该有能力自动响应用户的设备环境，响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这样，我们就不必为不断到来的新设备做专门的版本设计和开发了。我们可以将不同联网设备上众多的体验，当作是同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁而使得设计彼此断开，这才是我们前进的方向。
随着智能终端的普及，响应式网页设计被许多网站广泛使用，而且其优势和趋势均已经被普遍认可。
.开发、运营成本低：相同的页面针对分辨率的不同、设备环境的不同进行了一些不同的响应式设计，所以在开发维护和运营上，相对同时开发多个版本的成本会降低。
.兼容性好：移动设备的尺寸参差不齐，版本定制通常只适用于固定规格的设备，如果新的设备分辨率变化较大，通常不能兼容，若要开发新的版本，则需要时间，但是响应式设计可以提前预防这个问题。
.方便改动：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。
在 Matthew Carver的著作 The Responsive Web一书中，作者以一种易于接受的方式，为读者介绍了现代化的 Web设计，以及响应式设计的重要性。本书共分为 3个部分。第 1部分简明扼要地介绍了响应式设计是什么、它为什么会出现，以及现代化 Web浏览器中的哪些特性促成了响应式 Web设计的出现。这部分内容也谈到了“移动优先”这一概念，使用这种概念进行网站设计时，首先按照某个移动设备的断点进行设计，随后再转而设计它的桌面版本。第 2部分开始介绍如何设计响应式 Web。Carver首先讲解了一些如何为客户展示设计思想的技巧，而不是直接跳到代码的编写部分。他以导航的设计作为入口，介绍了设计模式的使用，以及如何创建响应式页面的思想。接下来的部分涵盖了如何进行实际的响应式设计的某些基本原理，以及用以展现信息的某些现代技术，例如 Web排版。本书的最后一部分介绍了一些高级技术，对于因各种浏览器的不同行为所造成的问题提供了有效的解决方案。在本书的结尾部分，作者对于设计的测试，以及如何进行性能优化方面提供了一些实际建议。
响应式设计在 2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新，各种 Web的响应式设计也获得了越来越多的关注。比如，新的设备不断被创造出来（iPad Mini、iPad Pro），另外 iOS 9新增的 Split View也让页面的展示尺寸有了更多的可能性，这让以前的设计想法土崩瓦解。“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，响应式设计归根结底不是一种技术，而是一种设计思维方式，即刻起，打开本书开始拥抱响应式 Web的设计开发吧。
郭凯美团网前端负责人

译者序

迈克尔·塞勒（Michael Saylor）所著的《移动浪潮》一书中有这样一段话：“一项真正颠覆性的技术出现了，而且它将彻底改变商业、社会或经济。它在多个层面产生非线性的影响，而且其影响巨大，以至于很难在尘埃落定之前确定其影响范围。 ”
以 iPhone为代表的移动设备便是具有代表性的颠覆性产品，它带来了令人惊叹的用户体验。早在 2009年的时候，我所负责的项目便涉及了移动 Web开发。虽然那时只是一个简单的 OA审批页面，但为了能在 PC和手机上显示，我们使用了独立的两套模板。随着业务的不断深入，类似的需求越来越多。这样需要维护的“双胞胎”页面也越来越多，制作及维护代价越来越大。直到我拜读到伊桑·马科特（ Ethan Marcotte）关于流动布局介绍的文章后，方才茅塞顿开。根据其设计思想加上少量的 JavaScript代码实现了可以兼容 PC和移动端的页面，当然现在看来，那时的页面和技术还略显粗糙，但是已经令我兴奋不已。
转眼间到了 2010年 5月，伊桑 ·马科特在 A List Apart上发表了一篇题为“响应式 Web设计”（Responsive Web Design）的文章，他利用三种工具创建了一个在不同分辨率屏幕下都能完美展示的网页。它们分别是：流式布局、媒体查询和弹性图片。这种设计思想将我们带入一个新的时代，让我们先来认识一下响应式 Web设计的“三剑客”。
.流式布局
与传统的固定布局以像素单位为主不同，流式布局以百分比单位为主，这样便可以设计出更具灵活性的布局方式。如： Bootstrap移动设备优先的流式栅格系统。
.媒体查询
媒体查询是与设备相关的技术，它可以让你查询到设备的各种属性值，如：设备类型、分辨率、屏幕物理尺寸及色彩等。从而决定应用不同的样式，给出求同存异的布局 /样式方案。
.弹性图片
弹性的含义可表述为，图片可以根据当前的视窗自适应展示，图片的视觉表现力非常突出，因此弹性图片的布局与适配非常重要，这里所述的图片包含了以图片为代表的图形或者媒体元素：图片、图标、图表及视频等。
基于上述工具进行响应式 Web设计，可以使用以下两种设计模式。
.设备优先
断点是为了适应各种设备的宽度值，技术上是基于媒体查询来判定当前设备的宽度，从而可设计多套样式来满足不同设备的视觉展示需求。因此设计模式是基于设备的。
.移动优先
移动优先允许你优先考虑内容并更早地关注你的网站的最重要部分。某些时候，移动优先也许与“内容优先”同义，从核心上说，移动网站策略就是内容策略。由于大小、功率和带宽等限制，移动 Web设计 90%是内容性设计， 10%是装饰性设计。所以我们要根据内容的可读性、易读性来确定断点，从而无视设备。因此设计模式是基于内容的。
本书简介
本书全面介绍了响应式设计的概念以及技术技巧，由浅入深地讲解了其中原理性的知识。共分三个部分。
第 1部分
从开发者和设计师的角度介绍了响应式设计的基本概念，让你能快速地对响应式设计有基本认知和了解，涵盖了媒体查询、断点、移动优先、字体等知识。为开始构建响应式网站提供了必要的背景知识。
第 2部分
从开发者与设计师协作的角度介绍了如何进行响应式设计，让你了解在响应式设计中团队应该如何进行协作来完成一项成果。同时用了一个示例来阐述这个过程，涵盖了样式指南、设计模式、布局、排版、网格等知识。最后对面对多种终端设备如何组织内容模块进行了深入探讨。
第 3部分
这部分对编码技巧和实战优化进行了介绍，涵盖了 SVG、图标字体、测试、浏览器兼容增强、性能等知识，这会让你在实战中得到更多的技术支持和应用。
响应式设计是一种新的设计理念，需要你不断学习、探索、实践，它会让你的内容在不同设备上展现得更加精彩。

适用读者
本书适合任何对 Web设计感兴趣的读者进行阅读，特别适合前端工程师、设计师、产品经理、架构师、项目经理等。示例中会涉及一些 HTML和 CSS代码，理解这些代码会极大帮助你深入了解响应式 Web设计开发中的技巧。


序言

2010年 5月的时候，我在 A List Apart网络杂志上读了一篇文章。如果你曾订阅过这本杂志，可能知道我谈论的这篇文章。你可能读过它，或听过关于它的一些引文、评论、讨论与辩论。现在 5年过去了，这篇文章奠定了自 20世纪 90年代 Web标准运动以来互联网上最大的运动之一的基础。
当 Ethan Marcotte的文章 Responsive Web Design1出版的时候，我对 Web还知之甚少，那时我正在网页制作工作室做我的第一份工作。我的第一部 iPhone手机已经买了有几个月的时间了，我正进行移动网站的编程。我的项目中包含了适配移动设备的样式脚本，像那时的许多开发者一样，我正苦苦地寻找一个好的方案进行移动 Web开发。
iPhone改变着一切，很快它便成为我浏览网页最喜欢用的工具。但网站在 iPhone上的界面很不友好。Ethan的文章像救世主一样给我们带来了启示，它为开发中遇到的这个棘手的问题提供了一种清晰的解决方案。自 2010年 6月起，我开始在工作中使用媒体查询（Media Query）。响应式 Web设计给我的项目添加了一些新鲜的、令人兴奋的元素，也彻底解决了我遇到的移动 Web设计的问题。
除了技术上的挑战，响应式 Web设计也给我介绍了一种新的工作方式。那就是，响应式设计需要视觉设计师和前端工程师齐心协作，这正是令我兴奋的一点。说到网页中的设计与开发这两方面，我一直觉得它们的融合是创造令人不可思议的数字体验的关键所在。这成为令我着迷的响应式设计的一部分：设计和编码的创造性成为前端开发的前期工作。
我有这样一个习惯：每当发现一些有趣的事情，总想与人分享。如果你在我的公司待上几分钟，可能就会听见我在一些无聊的话题上侃侃而谈，如漫画书、棒球、威士忌和一些自以为是的漫谈。响应式 Web设计没有什么不同，我告诉每个人我有在 Web会议上讨论它的权利。
这本书依然沿用了我的惯用风格。我对正走向成熟的 Web迈出的巨大一步表现出溢于言表的热情。我相信互联网是人类历史上最重要的发明之一。人与人之间的信息分享对创造与创新非常重要。互联网会成为人类历史上最好的分享想法与信息的媒介。
我希望这本书能够帮你对响应式 Web设计有一个新的认识。我的目标是让这本书鼓励读者开始尝试响应式设计，更重要的是给读者提供工具与语言，帮助设计师与开发者实现协作。这本书能使你了解如何创建一个全新的与设备无关的 Web。

致谢

这本书的完成离不开卓越团队的支持，感谢这些人让我做了这件我从来没想过自己能做到的事。我想借此机会由衷地感谢这些人。首先，我想要感谢组织了 HTML5.tx会议的 Brandon Satrom和他的团队。如果没有那次在公共平台上分享我的观点的机会，这本书就不会诞生。感谢 John Tornow和 Randy Bradshaw 两位导师，他们鼓励我在职业生涯早期树立雄心壮志并给我指引了方向。感谢 Chris Williams、 Brooks Oakley、Justin Tabor、James Henningson、Brian、Linder和 Cory Hudson给予我的支持、鼓励、建议和智慧。
写这本书并不那么容易，特别对于 Manning出版社的合作者们，与 Manning的团队一起工作充满了欢乐。在写书期间，我生活中的一切都像是冒险。 Manning的团队是这本书能够完成的基石。首先，我必须感谢策划编辑 Cynthia Kane的指引、耐心、指导和建议。 Cynthia给予我一次又一次的超出职责范围的帮助，使我的工作不再乏味。我不会忘记她付出的那些不可想象的辛勤劳动。感谢 Roberto Alarcon在我写作期间所做出的贡献， Andy Carroll在审稿时发现的低级语法和排版错误。感谢作为专业校对员 Valentin Crettaz的缜密工作，他给了我很多无价的建议和评论。感谢 Kevin Sullivan使这本书的图片有最佳视觉效果。
特别感谢以下在写作过程中阅读了原稿的人，是他们的反馈使这本书变得更好。他们是： Adam Murray、Beno.t Benedetti、Brian Bush、Bruno Sonnino、Christopher Weiss、Daniele Midi、 David Landau、Dr. Martin Beer、Gary Kirrene、 Gregor Zurowski、James Bisiar、Jeff Smith、Joel Kotarski、John D. Lewis、Mike Donahue、 Nikolaos Kaintantzis、Sebastian Felling和 Sergio Arbeo。
最后，我想感谢我的妻子 Alex。在过去的 6年里，她是我生命的支柱、力量的源泉，没有她的爱与支持就不会有今天的我。当我还是一个卑微的自由 Web设计师，过着入不敷出的日子时，她一直鼓励着我；是她给了我信心，让我去从事第一份正式的 Web开发的工作；是她在困难时刻不离不弃；是她不厌其烦地听我讲述 Web设计，帮我巩固思维，助我完成这本书。她甚至还帮助我编辑我最初的关于响应式 Web设计的博客文章。认识她使我成为这个世界上最幸运的人。Alex，你是我一生的挚爱。

关于本书

响应式 Web设计是一项能够自适应手机、平板电脑和 PC等设备中的多种浏览器的网页技术。它通过 CSS3 的媒体查询（ Media Query）得以实现，开发者借助媒体查询只需一套设计就可以在众多的设备上展示不同的页面效果。虽然这项技术表面看来很简单，但是实际运用起来会遇到不少挑战。
本书中有许多响应式 Web设计实际运用的案例，开发者可以通过它们提升自己的开发技巧，设计师也可以从中学到运用这项技术进行设计的技能。本书的目标不是简单地罗列出使用响应式 Web设计所面临的挑战，而是对在运用这项技术时团队所遇到的设计和协作问题进行详尽的描述。
本书不是简单的蹒跚学步的教程，它不仅能够帮助设计师和开发者更好地了解进行响应式 Web设计的实用组件背后的原理，还给出了许多相关提示。每一章结尾既有本章总结，也有对内部机制的思考或设计师与开发者应如何开展沟通协作的小话题。希望这本书能够成为你的团队的读物，激发你对响应式 Web设计的想象力，并加深你对响应式 Web设计的理解。同时希望这本书能成为你的团队进行响应式 Web设计实践的指引者。
本书结构
本书分 3部分，共 9章，另外还有两个附录，但其中一个附录只能在网上进行查阅。
.第 1章简述响应式 Web的核心概念、发展历史及团队如何开展相关工作。 .第 2章着重描述如何针对手机屏幕进行设计及在小屏幕上遇到的设计问题。 .第 3章介绍了样式板（ Style Tile），类似情绪板（设计师常用的方法），不用提供布局就可以交付成果的设计方式。
.第 4章给出响应式设计模式的概要。包括设计模式的概念和使用响应式布局所遇到的问题的解决途径。
.第 5章介绍了响应式布局，着重描述网格系统和屏幕大小发生改变时改变页面布局的方法。
.第 6章讨论了响应式内容所面临的难题及使内容随屏幕大小正确展示的方法。
.第 7章介绍了一些强大的 CSS3技术，着重阐述给响应式页面添加视觉图形和样式的方法。本章不仅包括响应式图片和视频，还包括如何通过 CSS对网页进行缩放的技巧和提示。
.第 8章介绍了一个解决浏览器兼容性和移动资源优化的工具— —Modernizr。读者将会学习到如何使用它来提升网页性能和解决跨浏览器及跨设备的兼容性问题。
.第 9章给出进行响应式测试时会出现的提示及通过网络审查工具优化网页的方法。 .附录 A附在本书后面，而附录 B只能通过下面这个网址获取， www.manning.com/ The ResponsiveWeb。

本书面向的读者
本书适合前端研发的从业者。它的目标是解决设计师和开发者的协作问题，并能够激发和增强读者对互联网未来的好奇心和信心。任何从事互联网相关工作的读者都能从中获益，包括设计师、开发者，甚至管理者。
如果你对 HTML和 CSS有基本了解，将会对理解本书的一些章节有所帮助。本书假设读者对互联网设计和开发的核心概念有基本的了解。由于大部分内容是非技术性的策略和建议，本书并不要求读者必须为程序员，但是熟悉 HTML将会获得更好的阅读体验。
如果你正在创建、设计响应式网页，或者需要与做这样工作的团队合作，那么这本书就是为你量身定做的，它涵盖了大量关于响应式 Web开发的背景知识。

代码约定和资源下载
本书所有的代码都会使用等宽字体与普通文本加以区分： fixed-width font like this，代码注释中将会罗列一些醒目的重要概念。
本书引用了大量阐述设计和开发原则的代码，所有 HTML、CSS和 JavaScript的源代码都可以通过出版社的网站下载， manning.com/TheResponsiveWeb。绝大部分 JavaScript源代码都会引用 jQuery，它和少部分的 JavaScript库一样保存在互联网服务器上，需要你联网获取。除去这些，其他代码都是本地可运行的。本书有对相关源代码文件目录的介绍。本书绝大部分代码都十分简洁，并且相对独立。


在线交流

购买了本书的读者能够免费进入由 Manning出版社提供的互联网论坛，读者可以在那里对此书发表评论、提出问题并获得作者和其他读者的帮助。论坛网址为 www.manning.com/TheResponsiveWeb。页面上有引导你注册的信息，以及论坛提供的帮助和论坛规则的介绍。
Manning出版社承诺提供一个读者之间及读者与作者之间进行有效沟通的场所，但是并不能保证那些自愿并且免费为社区做贡献的作者也能够参与其中，建议读者提出能够让作者感兴趣的问题。只要图书还在销售，读者随时都可以进入该论坛并了解相关讨论。

关于作者

Matthew Carver 是一名技术专家、演讲者、作者和提倡设计和技术相融合的顾问。他是响应式 Web设计早期的拥护者，曾参与过 American Airlines、Dallas Momoing News、Chobani、Home Depot和 Google等公司的给生活带来革新的项目。 Matthew最初在德克萨斯州达拉斯市的 Richards Group工作，现在与他的伙伴一同在纽约市成立了一家数字公司，他们会把一些想法发布到线上。他的个人主页为 Matthew-Carver.com，Twitter账号是 @matthew_carver。