作者：王鹤,罗创杰
出版社：电子工业出版社有限公司
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
响应式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标准运动以来互联网上最大的运动之一的基础。[1]
当Ethan Marcotte的文章Responsive Web Design出版的时候，我对Web还知之甚少，那时我正在网页制作工作室做我的第一份工作。我的第一部iPhone手机已经买了有几个月的时间了，我正进行移动网站的编程。我的项目中包含了适配移动设备的样式脚本，像那时的许多开发者一样，我正苦苦地寻找一个好的方案进行移动Web开发。
iPhone改变着一切，很快它便成为我浏览网页最喜欢用的工具。但网站在iPhone上的界面很不友好。Ethan的文章像救世主一样给我们带来了启示，它为开发中遇到的这个棘手的问题提供了一种清晰的解决方案。自2010年6月起，我开始在工作中使用媒体查询（Media Query）。响应式Web设计给我的项目添加了一些新鲜的、令人兴奋的元素，也彻底解决了我遇到的移动Web设计的问题。
除了技术上的挑战，响应式Web设计也给我介绍了一种新的工作方式。那就是，响应式设计需要视觉设计师和前端工程师齐心协作，这正是令我兴奋的一点。说到网页中的设计与开发这两方面，我一直觉得它们的融合是创造令人不可思议的数字体验的关键所在。这成为令我着迷的响应式设计的一部分：设计和编码的创造性成为前端开发的前期工作。
我有这样一个习惯：每当发现一些有趣的事情，总想与人分享。如果你在我的公司待上几分钟，可能就会听见我在一些无聊的话题上侃侃而谈，如漫画书、棒球、威士忌和一些自以为是的漫谈。响应式Web设计没有什么不同，我告诉每个人我有在Web会议上讨论它的权利。
这本书依然沿用了我的惯用风格。我对正走向成熟的Web迈出的巨大一步表现出溢于言表的热情。我相信互联网是人类历史上最重要的发明之一。人与人之间的信息分享对创造与创新非常重要。互联网会成为人类历史上最好的分享想法与信息的媒介。
我希望这本书能够帮你对响应式Web设计有一个新的认识。我的目标是让这本书鼓励读者开始尝试响应式设计，更重要的是给读者提供工具与语言，帮助设计师与开发者实现协作。这本书能使你了解如何创建一个全新的与设备无关的Web。[1]http://alistapart.com/article/responsive-web-design.
致谢
这本书的完成离不开卓越团队的支持，感谢这些人让我做了这件我从来没想过自己能做到的事。我想借此机会由衷地感谢这些人。首先，我想要感谢组织了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，你是我一生的挚爱。第1部分响应式之道响应式Web设计正在改变着我们所构建的东西，它对在线作品重新下了一个基本的定义，它要求我们考虑到Web设计和开发过程中的每一个步骤。首先，在本书的第1章中你将学到响应式的工作方式。紧接着，为你介绍了一些进行响应式Web设计的入门知识。这将使你了解到响应式Web设计所需要的东西，同时介绍它与传统的Web设计的区别。在第2章中，我们将讨论移动优先设计。这里开始提及设计网站过程中的挑战，首先要考虑保持它的移动版本。这将完善对响应式Web设计的介绍，并为你开始构建响应式网站提供一些背景知识。1 开启响应式之路本章要点■ 响应式工作流概览■ 使用原型讨论响应式设计方案■ 制作一个简单的响应式网页
随着网络的发展，我们也在不断地学习新的技能。我们不断创建新的工作方式改进旧的工作方式。响应式Web设计为我们的工作流添加了一套全新的技能。但在开始讨论这些技能之前，我们首先要了解一下到底什么是响应式Web。
还记得人们曾经把互联网称为“信息高速公路”吗？也许这有点俗气，但我们还是设想有这么一条“高速公路”。现在这条公路上充满了各式各样的汽车：跑车、18轮大货车、自行车、家庭轿车、赛车和卡车。有些车的时速高达每小时几百英里，其他车与它比起来则慢得像蜗牛一样。如图1.1所示，某些路段有自行车道、轿车道和高速道。每隔一段时间就会有人犯糊涂，就会出现跑车在自行车道上奔驰，而自行车在轿车道上行驶的现象。
就像交通部门建立交通法规一样，响应式Web力求建立一个能够适应用户大小不一的屏幕的标准开发模式。近十年来，Web设计和开发都只需满足一成不变的窗口模式，人们只会通过台式机和笔记本电脑访问网页。那时带宽和屏幕分辨率都相当稳定，传统的鼠标和键盘是上网冲浪的标配。因此，我们就有了一个标准，在这种固定的模式中工作即可。图1.1 “信息高速公路”中的车道
然而随着手持设备和平板设备的增多，Web设计和开发经历了一系列快速且痛苦的成长。移动网页并不新鲜——为移动设备进行优化的网页已经出现超过10年了。问题在于这些移动网站的架构设计。
Ethan Marcotte（Handcrafted CSS和Designing with Web [1]Standards,Third Edition的作者之一），在网络杂志A List Apart上写了一篇名为《响应式We b设计》的文章，提出了一项新技术，此技术可以设计出能够自适应的网站（http://mng.bz/pOIb），可以适配用户从手机到台式机的五花八门的屏幕。Marcotte把这篇文章扩充为一本同名的书籍《响应式Web设计》（A Book Apart, 2011），此书开创了Web设计的新潮流，激起了全球无数设计师和开发者的共鸣。
无论你是设计师、开发者还是与之相关的从业者，本书都能够改变你的工作方式。本书将教你使用一些工具，这些工具可以帮你理解如何通过响应式Web的规则进行创造。通过本书，你将学到如何处理受限于小屏幕的设备（如智能手机）的问题。本书将涵盖响应式Web设计的关键概念、技术，以及投身于响应式Web领域所需的知识。
本章介绍了响应式Web及它的核心概念，为你开始进行响应式开发提供了基础知识，一旦掌握了这些基本概念，你就可以开始进行响应式Web编程了。设计师/开发者必读在本书中，设计师和开发者这两个概念之间的界限是模糊的。有时候两项工作由同一个人负责，而有时这些工作则会由许多人负责。无论如何，响应式Web需要设计师和开发者相互协作。本书的目标不仅包括教会设计师和开发者如何成功构建起响应式网页，还包括教会两者如何高效地进行沟通和协作。只有你把精力集中在工作和产出上时，响应式设计才算是真正完成了。本书的某些章节将会深入讨论设计原则，其他部分将着重讲述开发技能。涉及的设计和开发的知识对于响应式设计进行平衡训练相当重要。请留意这样的提示栏，这些提示栏中有总结出的相关的关系并提供一些具体学科的见解。1.1 初探响应式Web
我知道你可能已经迫不及待地想要搭建起属于自己的第一个响应式网站了，但在此之前，我想确保你已经对相关概念有了基本的认识。在本章中，我将告诉你响应式Web真正的定义以及它的关键特征。当你看完这些介绍，就可以开始搭建响应式网站了。1.1.1 什么是响应式Web
为了进一步了解这个概念，我们需要设置一些基本的规则来描述响应式Web：
■ 如图1.2所示，一个响应式网站无论在手机、平板还是台式机[2]上都只用一个URL。由于移动端流量占比为15%左右（或许更多），平板和智能手机市场不断扩大，这些设备俨然已经成为互联网中关键的一部分。图1.2 这是一个只有单个URL的响应式网站的例子（http://mng.bz/vTVT）。2013年Webby奖网站中的“Activism”部分可以通过多种手持设备进行访问
■ 由于响应式Web设计依赖媒体查询来调整页面宽度，所以它需要CSS3和HTML5的支持。
■ 响应式网站力求跨设备的一致性。通过单个URL实现所有入站链接打开的网页所展示的内容一致。
■ 响应式网站有更快的展示速度和更好的用户体验。遵循移动优先，效率是其重点。
■ 响应式网站是面向未来的。每一个网站最终都需要用新技术进行优化，但通过响应式的方式搭建，即可确保此优化不需要进行全站重构。
如果你曾设计或者开发过一个网站，可能会有一个标准的工作流程。你会使用某些工具帮助自己构建网站。很多情况下，搭建起一个响应式网站需要调整这些工具并使用一些全新的工具。
传统的网站开发需要瀑布式的流程，整个项目需要遵循一个标准流程，如图1.3所示。
如果团队需要对项目进行更改，那么瀑布流方式将会显得非常低效且代价很高。再如，当开发过程中遇到了不一致的地方或者遇到性能瓶颈该怎么办呢？可能整个项目就需要做出修改，甚至重构。图1.3 通常被称为“瀑布流模型”，处理过程中的每一个步骤都需要创造出一个可交付的成果，然后传给工作流中的下一个环节
响应式Web讲的就是适配性。在响应式Web设计中，团队之间紧密协作，共同构建一个网站。团队间需要迭代和改进彼此的工作方式（参见图1.4），而不是把一个成果在“网站装配线”中传递。图1.4 在这种全新且更敏捷的方式中，用户体验和开发不断进行迭代。迭代周期中会不断交付和验证成果
在传统的基于像素的设计开发中，工作重点是设计部门对布局的改造工作。但是在新的设计开发方式中，重点将放在适配性上。基于像素的尺寸和字体的标准不再适用，我们需要一些具有流动性的东西。
通过专注于适配并为网站提供一个流式布局，你的网站将获得以下几点好处。
■ 能够适配不同屏幕大小的布局技术——如果一个新的网络产品能够满足罕见屏幕的市场，那么你已经应用了此技术。
■ 使网站具有更快的响应速度——基于移动优先的原则，加载时间是开发时考虑的第一要素。网站响应速度越快越好。
■ 更简单的跨浏览器开发——用流式的CSS能更加简单地解决跨浏览器的布局问题。1.1.2 关键特性
如果没有以下两个特性，响应式Web将不复存在：媒体查询和断点（breakpoint）。就是因为这两个特性，网站才能够具有跨浏览器的响应性和适配用户各种屏幕的能力。媒体查询
媒体查询是CSS的语法规则，它能够基于查询定义的参数控制样式。每一项媒体查询都指定了媒体的类型和一系列需要浏览器进行检查的表达式。可选的媒体类型包括指定为数字屏幕的screen，指定为打印页面的print和指定为所有类型的all。表达式则更加复杂，它包括如max-width和orientation这样的指令。[3]
2001年W3C的CSS3草案推出了媒体查询的规范，这项规范规定了基于浏览器和屏幕大小提供不同CSS规则的解决方案。媒体查询是一个巧妙的方案，它是响应式Web的生命和精神。它能用来基于一些因素——如屏幕分辨率、设备方向，甚至显色指数（color index）——提供不同的CSS规则。没有它，移动开发将会非常困难。
媒体查询非常简单，语法如下所示：
样式表中的此语句将通知浏览器，屏幕设备中所有段落标签中的font-family将会使用sans-serif字体。它不会应用到打印页面中，也不会应用到媒体类型为handheld的设备中。
接下来请设想有下面的规则：
通过此语句，用户设备的媒体类型将会被定位为handheld。实际上，在当下流行的设备中，这句媒体查询语句几乎没有用处，因为绝大部分设备厂商都把他们的设备的媒体类型定为screen（如iOS、Android，甚至是Kindle）。
媒体查询还可以通过在标签中写查询语句的方式加载相关的CSS文件。在这种方式中，媒体查询将会写在网页顶部的head标签之间，如下面所示：
在此例中，只有标记为handheld设备的浏览器才会加载相关的样式表。
这两种方式最大的差别为，是否通过一个额外的HTTP请求加载一个独立的样式表文件。浏览器只会加载通过媒体查询检查的样式文件。此方式可以限制页面的CSS文件数量。
在响应式设计里，媒体查询主要用于基于视口宽度——通常与浏览器窗口宽度一致——提供不同的CSS。这些查询语句被称为表达式（expression），由浏览器进行检查。
设备给服务器发送的信息包括用户代理、设备分辨率和窗口大小。在响应式Web中，了解这些因素以及它们之间的差异是非常重要的。通过媒体查询，可以基于不同的视口宽度或者设备宽度使用不同的CSS。
以下的媒体查询将会在宽度为400像素或更小的视口上应用相应的CSS。
把媒体查询改成下述形式，将会把目标定位为只有400像素或更小的设备。
了解上述两条语句之间的差别尤为重要，因为有时候需要为被缩小的浏览器窗口提供小尺寸的规则，以防止出现横向滚动条或者提供更好的用户体验。有时候却会把规则的目标定位为小屏幕设备。无论台式机的浏览器窗口大小如何改变，只给它提供满屏版本的样式。
另外，还需要注意以下两个表达式的差别：min-width和max-width。@media(max-width:400px){...}定位400像素或更小的目标，而@media(min-width:400px){...}则定位400像素或更大的目标。max-width只会影响目标宽度及其之下的视口，而min-width将会影响指定宽度及其之上的所有视口。
那么如何确定什么时候该用媒体查询呢？我们看下一个议题。断点
响应式设计的目标是避免出现Ethan Marcotte所描述的“零和游[4]戏”（zero sum game）现象，即为每个可能的设备都设计一个网页。为了避免此现象，我们必须分出一些边界。这些边界将会调整页面布局以适应变化的内容。那当网站需要做出宽度从移动设备到台式机的转变时，应该在哪个点做出改变呢？
应该在响应式设计中的断点（breakpoint）位置做出改变。这些断点作为响应式页面应用新规则的临界点。图1.5中展示了页面中三个可能的断点。图1.5 一个页面中的三个分辨率断点。在此例子中，第一个断点可能代表大屏
幕平板设备，第二个也许是小屏幕平板设备，第三个表示移动设备
请设想有一个会缩小的600平方英尺的房间。大概在550平方英尺的时候，家具开始挤在一起，房间变得非常狭小，所以需要调整家具大小并改变布局。房间继续缩小到500平方英尺的时候，需要再一次调整房间的布局。在这个比喻中，房间的断点为600、550和500平方英尺，因为在这三个点处布局开始发生改变。
有一些设计师喜欢用标准化的断点，这些断点用于构建移动设备、平板和台式机的网站。我更喜欢以移动优先的网站为基础去处理更大的视图。在此方式中，慢慢扩大页面，一旦布局开始变得难看且边界之间有过多的空间，我会设置一个断点并逐步进行调整。1.2 构建第一个响应式网站
现在你已经了解了什么是响应式Web，那么，可以着手搭建一个响应式网站了。接下来的内容是搭建响应式网站的基础知识。本章要求读者有HTML和CSS的基础知识。如果你是新手，建议先阅读像Rob Crowther写的Hello!HTML5&CSS3 （Manning出版社， 2012）这样的入门书籍。我将会分几点进行阐述，如果你感到疑惑，还请查阅相关的资料。
第一步是搭建原型。在开发响应式网站时，我习惯搭建起一个快速原型，这样可以在浏览器上查看效果并布局网站内容。原型是用HTML语言编写的，这样无论在手机、平板还是台式机的浏览器上都可以展示出来。一旦进入实际的设计阶段，它为团队带来的好处就会显现出来。
接下来我们会讨论如何处理传统的布局。布局也许是设计总监用Photoshop、Fireworks、InDesign或者Illustrator等软件生成给你的。我们将会讨论如何将一个完整的网站设计的各个部分抽离出来，并将之转换成移动网页的标签。之后我们会学到如何用百分比技术建立网页的布局以及如何实现响应式图片。最后，我们将会设置第一个断点。
这些都是激动人心的工作。这一章我们会搭建起一个原型，整本书接下来的内容都会以此为基础展开。虽然这并不是全部的内容，但也算得上响应式Web的冰山一角。1.2.1 创建网站原型
我小时候很爱动手实践，在上完高中的手工艺课后，就制作了一个工具箱。做完一个之后想到：虽然这个不错，但它还不够完美，因此又重新做了一个工具箱。每天晚上我都在捣鼓这些小金属盒：不停地剪断、弯折然后重新焊接。每次都在某些地方做出一些调整，每次我的技术都有提高，每一个工具箱都比上一个更好。
不断在一个原型的基础上建立另一个原型，这样在期末考试的时候，我清楚地知道工具箱是怎么一步步制作出来的。建立响应式网站也是同样的道理。通过这样构建原型，就可以在搭建起网站之前用肉眼决定网站应该是怎样展示的。无论对于设计师还是开发者来说，快速原型都是必要的。快速原型就是搭建网站前的探索流程。有很多方式可以搭建起快速原型，我们将使用Zurb的作品Foundation 3。
Foundation是快速制作网站的前端框架，它提供了一系列简化前端开发的工具。不过像其他框架一样，它也有自己的约束规范，所以我只用它来搭建原型。我还是喜欢从头开始建立起一个网站。尽管如此，能够把想法在浏览器上展现出来还是非常棒的。开发者必读：Foundation的版本写本章的时候，我用了Foundation 3。Foundation一直在更新，现今，最新版本是Foundation 5。
Foundation有以下几点特性：
■ 响应式网格系统
■ 包括slider和tab在内的导航元素
■ 表单和按钮
■ 用于modal pop-up和tooltip的jQuery插件，如图1.6所示图1.6 Foundation的Reveal Modal组件示例
绝大部分构建原型的框架都相当简单，因此，尽管我不鼓励在生产环境下使用这些框架，Foundation用于生产环境时还是相当简洁的。Foundation可以通过此链接下载http://foundation.zurb.com。开发者必读：快速原型快速原型是防止伪想法的第一道防线。因为响应式Web总是不断在变化，页面上的每一个元素都必须足够灵活以便重构。在开始设计之前，确定模块和页面模板是引导交流的最佳方法。在构建原型的时候，经常会发现有更简单的满足用户需求的其他方法，或是发现一个元素完全没有必要。然而，快速原型最重要的优点是，能够通过一个不完整但却可用的网页，在团队里进行讨论，并在不同设备上进行交互。请记住，在网站搭建起来之前，一切都是不确定的。我经常被邀请到会议或复审中去评估一些想法是否可行。我尽我的最大努力做出猜测，但在我有时间去做一个原型和实验之前我是没法真正知道结果的。据我所知，很多最具创新性的产品的设计灵感都是在通过构建原型的探索中获取的。从草图到原型
接下来我们会重新设计一个技术博客并搭建出它的原型。之所以用博客做例子，是因为它是为数不多的每个开发者都有开发经验的产品。网站开发者几乎都会以个人博客和个人主页开始学习开发。就算你从来没有搭建过网站，至少也会考虑在自己的网站上展示什么。
因为我们将会把网站简化到极致的程度，所以会从一个简陋的草图开始。通常来说，如图1.7那样的草图都会转换成线框图（wireframe），以表述出网站的布局和功能。
如你所看到的，这个粗糙的图案清晰地指出了页面上将会有什么元素，并指出了元素之间的关系。作为开始时构建原型的模型已是绰绰有余了。用标签创建原型
Foundation中大部分的CSS和JavaScript都是现成的，你所需要做的只是写一些简单易懂的标签使其生效。本书第1章的源代码目录里包含了Foundation 3的全部源码。目录1.1包含了Foundation原型的初始模板。
一开始，我们将书写header的HTML代码。把header作为第一行（row），然后通过Foundation内置的12列网格系统把行内的内容分开。此部分代码可以在源代码目录1.2中找到。图1.7 为原型提供一些向导的草图
通过这一段代码，我们已经为原型建立了一个简单的头部。现在头部已经有了，在添加页面内容之前先添加一个页脚。这部分的代码在源代码目录1.2中：
只通过几行代码，你已经搭建起了一个基于浏览器的原型。放在开发环境的主机中，此原型可以在团队内部共享。对于设计师来说，它可以作为一个预览网站布局的工具；而对于开发者来说，它是一个在浏览器中的，让他们构思网站元素的模型。
如果你缩小浏览器窗口，可以观察到网页的样式是如何在小屏幕上变得错乱的。如果一下子把窗口缩小到手机大小，你可以看到头部发生错乱，变得很难看。幸好在视口改变的时候，Foundation赋予了我们控制原型展示方式的能力。使用快速原型创建内容
使用快速原型的优点之一是能够快速地在浏览器中查看和安排页面内容。例如，在重构博客网站的时候，可以把现有的文章、图片和视频放到原型中，以便观察网站内容是如何展示的。一些问题可能很隐蔽，直到项目的后期才被发现。而通过这种探索方式可以更早发现这些问题。
在使用快速原型之前，需要决定页面应该展示的内容。在响应式Web中定义内容的类型尤为重要。原因有两个：
■ 定义内容类型能够确认用户访问网站的缘由，这样可以根据用户需求来安排内容的展示优先级。
■ 一旦确定了网站的内容类型，就可以建立一个内容区域。内容区域（content well）是图片、文章和网站文稿这样的资源集合。
回顾一下草图，可以观察到里面有两种类型的内容：一张大图片和一篇文章。同时还有大标题、标签和日期。我们把这些内容复制到原型上。这部分代码可以在源代码目录1.3中找到：
前面的标签已经产生了一个可观的原型，如图1.8所示。图1.8 只需要少许标签，你的原型之路已经非常顺畅
可以发现，此原型稍不同于之前图1.7所示的草图。当把内容填充上之后，我发现日期和标签浮动在左侧会更加美观。我还通过把内容扩展到页面两端，使其显得更加充实。这就是活生生的例子，通过原型获取到了深刻的见解。
通过建立原型，可以决定网站的基础架构。虽然原型就可以用来打造一个响应式网站，但我还是推荐在构建实际的网站时把它抛弃掉。尽管像Foundation这样的框架能够快速建立原型，响应式网站还是应该用定制的CSS打造，因为这样每一个网页的性能会更好。
请将此铭记在心。接下来我们将搭建起一个基本的响应式布局，将从头开始着重关注展示一个非常简单的设计需求，演示一些在响应式网站中用到的基本的CSS概念。然后我们再重新回到之前的原型之中。1.3 响应式布局基础
在响应式Web中，设计师和开发者努力避免为各种各样的屏幕尺寸设计多个布局。适合于印刷出版物和早期网页的末稿（COMPS），即详细版面设计图，对于响应式设计来说局限性太大了。这时开发者就能够大显身手了。通过HTML、CSS和JavaScript等前端开发语言，开发者能够把设计稿翻译成互联网能够理解的语言。前面我们讨论了如何通过快速原型在响应式的前端和设计的鸿沟之间搭起一架桥梁，现在我们把重点放在如何把全屏的布局设计转变成一个响应式的网站。末稿（COMPS,comprehensive layout）在广告页中是一张用于展示最终组合起来的网页布局的图片。它是印刷广告时代留下的产物，很好地满足了当时的需求。末稿在互联网的早期也非常有用，因为当时并没有各种各样的屏幕尺寸。很不幸，对于响应式设计来说末稿太受限了，因为它并不能满足具有伸缩性的网站的需求。
你可以查看网站的组成，并对保持不变的、将被重构的和需要在小屏幕环境（手机）中移除以保留空间的元素做出基本的假设。我们现在查看示例布局（参见图1.9），并对如何进行移动优先的改造做出假设。
通过这些假设，我们可以规划出如何把全屏的网页设计转换成移动优先的网页。图1.9 审查设计图能够揭示出网站的含义开发者必读：CSS盒模型我发现在设计布局时把基础的CSS和模型铭记在心是非常重要的。页面将会是浮动的，默认是从上到下、从左到右（或者从右到左，取决于如何使用CSS的float特性）。一旦扩展布局，你能够轻易地把元素向左或者向右浮动，但是请确保你的标签中，第一个（也是最重要的）元素在文档的顶部，然后依次往下排列。1.3.1 移动优先标签
我们首先探讨页面的标签，这样能集中精力写出最简洁高效的HTML标签。因为在响应式Web中简洁高效的代码尤其重要，我们将在本章后面再处理CSS，我想多花点时间阐述一些实践：如何尽可能地使得标签更加干净和语义化。这也有利于后面页面适配平板和台式机。由于这些代码将会使用很多次，所以花点儿时间写出干净漂亮的代码吧。
写标签的目的很简单：把内容转换成HTML代码。虽然我们会使用一些基本的占位元素，但是理论上要尽量保持精简。这是一个好习惯，在响应式开发中更是如此。CSS和JavaScript是灵活多变的，但是标签在不同的视口中应该保持一致。
我们从一些标准的东西开始。因为将会用到基本的页面结构和CSS，我会写一个doctype声明和html、head以及body标签。这部分代码可以在源代码目录1.4中找到：
接下来就可以开始写响应式网页的标签了。所需要的第一个就是container div标签。这个标签可避免页面流动性过大，也会避免页面在断点之间产生不稳定的问题。
请注意在结束标签的之后有一个注释，标志这个div标签的结束。这会提醒你这个区域的作用。因为响应式设计是高度迭代的，这些注释将会为你省下很多时间。
接下来，我们将会创建页面元素。我们会以从左到右，从上到下的方向建模。当扩展为更宽的视图时，我们会提供一个逻辑的流程。这部分代码可以在源代码目录1.5中找到。
先从布局结构开始：
在这个例子中，需要留意一点。首先，我推荐用类名命名正在书写的区块。这样在编写整个网站的时候，可以重用类名，使得CSS更加精简。
现在已经建立起整个页面的框架，可以开始着手制作页面内容了。通常来说，编写原始模型时，写得越少越好。
现在我们开始着眼于标签的细节。以
下一步是写包含像导航和广告这样的次要内容的aside区块。
请留意，页面中的是被一个
再加上一些HTML代码，就完成了整个页面的标签，然后就可以开始编写页面样式了。
现在你就有了如图1.10所示的页面了。
此页面将会作为你的模板。把所有的内容填充进去后，你的根基就算是搭建完成了，之后可以开始为页面添加样式。尽管通常需要在页面上添加一些辅助性标签，但是由于现在采取的是移动优先的方法，页面标签总是越少越好。图1.10 只有标签没有样式的页面1.3.2 在CSS中使用百分比
现在可以开始为页面编写样式了。对于响应式设计来说，就如抢劫犯看到了路一般。
无论你要制造现实世界中的何种物品，都需要为其指定一些数值。例如你正在制作一个鸟笼，可以把尺寸定为长6英尺，宽7英尺，高5英尺。当完成的时候，就能得到一个6×7×5的鸟笼，它无法变大来容纳更大的鸟儿，也无法缩小到可以放在一颗小树上。但是在一个网页里你完全可以做到这种效果。
假设，你制作了一个有弹性的鸟笼，高为所在的树的5%，那么鸟笼就会随着树而变高，这样就能够容纳更大的鸟儿。通过百分比的方式，可以使网站结构基于这样一个流式的模型。百分比能够让任何一个元素大小变得与其父元素相关。在第5章我们会深入研究这个主题。
那么如何才能把之前静态的网页蓝图变成一个神奇的能够伸缩的鸟笼呢？使用容器
让我们从定义容器开始。因为采用了移动优先法，我们首先要定义容器元素的CSS。下面的CSS示例代码可以在源代码目录1.7中找到：
定义了容器之后，你就可以开始把其他内容放在里面了。这个容器将会是那个能够扩张的鸟笼。随着内容的不断增长，这个容器也将能增长去适应内容。
试读结束[说明：试读内容隐藏了图片]