响应式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的设计开发吧。
郭凯美团网前端负责人
专家书评
我一直认为响应式不是**的，阅读完本书你可以了解到响应式web 的精妙所在，你会更加理解什么情况下可以并且应该使用它。这本书从响应式每个部分的原理讨论出发，并手把手地从设计到编码给出每一步的细节，相信每一位读者都能从中获益。
——鬼道/ 徐凯，天猫技术专家,《跨终端web》作者
在移动互联网时代，响应式web 是每个前端工程师所必备的技能之一。这本书不仅有原理的介绍，而且还讲解了各种场景下响应式页面的实现方法，每个案例都很实用。响应式web 的体验是否优秀，在很大程度上取决于设计，难能可贵的是，这本书作为一本技术书籍对响应式设计也花了部分篇幅进行讲解。
——赵文博，奇虎360 奇舞团技术经理
在设计师的眼里，移动互联的发展从某种意义上来说就是交互媒介和屏幕适配的更新和多样化。我们的web 产品设计面临着一场智能化的革命，因为用户对产品的要求已经今非昔比：从光标到指尖；从pc 到移动设备；从横屏到竖屏……这种种碎片化的局面一度让设计师苦不堪言，甚至无从下手。因此，响应式设计技术的出现无论对设计师还是开发者来说都是一个福音，我们现在真正需要的就是抓住这个机会，利用这个划时代的技术打造出更适合移动互联用户的web 产品。因此在我看来，这样一本著作的出现实在是一场“及时雨”，它告诉了我们设计师和开发者如何更好地合作，以及更充分地利用这个“利器”打造更完美的web 产品。
——赵大羽，智捷课堂联合创始人，ue/ui 专家，高级讲师
惊叹一种优雅的代码可产生多种精美绝伦的页面。在资源有限的前提下，响应式web 设计为我们提供了支持业务快速迭代可行性的解决方案。本书不仅详解了响应式设计的概念，还引入了大量的实战技巧，这使得设计师和开发者可以非常容易地应用响应式web 设计。推荐涉及移动设计方面业务的读者阅读本书，让我们一起享受响应式web 设计带来的乐趣吧！
——张鹏，王府井百货集团技术总监
精彩绝伦且受益匪浅！
——james bisiar，digital solutions
强烈推荐！可以丰富你的web设计实践经验。
——gregor zurowski，sotheby’s
让精美绝伦的网站展现在你的任何设备上！
——daniele midi，whitelemon design studio
精彩，设计师和开发者协作的**实践。
——roberto alarcon，innovocommerce
为移动设备进行设计的经典教科书！
——benoit benedetti，university of nice
]
本书特色
[
《响应式web》全面介绍了响应式设计的概念以及技术技巧，由浅入深地讲解了其中原理性的知识。第1部分从开发者和设计师的角度介绍了响应式设计的基本概念。第2部分从开发者与设计师协作的角度介绍了如何进行响应式设计。第3部分对编码技巧和实战优化进行了介绍。
响应式设计是一种新的设计理念，需要你不断地学习、探索、实践。它会让你的网页内容在不同设备上展现得更加精彩。
]
内容简介
[
书中实践源于多年生产环境的经验总结，绝不是赘述纯理论知识，而是教你在实践中如何开展响应式设计工作。你将学会利用已知的html5和css3新特性来进行创新设计，然后找到权衡app和web以及处理浏览器兼容性的方法。《响应式web》为专业的设计师和开发者创造前端web界面而生。
《响应式web》内容涵盖：
* 响应式设计概念
* css预处理器
* 快速原型技术
* 流式布局
* 渐进增强设计
]
作者简介
[
Matthew Carver 是一名技术专家、演讲者、作者和提倡设计和技术相融合的顾问。他是响应式Web 设计早期的拥护者，曾参与过American Airlines、Dallas MomoingNews、Chobani、Home Depot 和Google 等公司的给生活带来革新的项目。Matthew*初在德克萨斯州达拉斯市的Richards Group 工作，现在与他的伙伴一同在纽约市成立了一家数字公司，他们会把一些想法发布到线上。他的个人主页为 Matthew-Carver.com，Twitter 账号是@matthew_carver。
王鹤，系统架构设计师，吉他手。从事过JavaEE的企业应用的研发和架构工作，一直关注HTML5技术的发展，2011年至今一直维护开源图表项目ichartjs。目前就职于美团网，任职前端技术专家，秉承的信念是“技术这条路上虽然崎岖，但值得坚持”。
罗创杰，美团网研发工程师，专注于前端领域，喜欢从容不迫地写代码——很优雅的那种。
]
目录
第1部分 响应式之道 1 开启响应式之路 ……….3 1.1 初探响应式web …………………………….. 5 1.1.1 什么是响应式 web ……………… 5 1.1.2 关键特性 ……………………………. 81.2 构建**个响应式网站 ……………….. 10 1.2.1 创建网站原型 …………………… 11 1.3 响应式布局基础 ………………………….. 18 1.3.1 移动优先标签 …………………… 19 1.3.2 在 css中使用百分比 ……….. 24 1.3.3 添加文本和图像 ……………….. 28 1.3.4 强大易变的 em …………………. 30 1.3.5 设置**个断点 ……………….. 33 1.4 总结 ……………………………….. 34 1.5 讨论的观点 ………………………….. 35 2 移动优先的设计 …….. 37 2.1 为何选择移动优先设计 ……………….. 38 2.1.1 移动优先设计的优点 ………… 39 2.1.2 移动优先设计的挑战 ………… 40 2.2 为小屏幕设计头部 ………………………. 42 2.2.1 创建头部 ………………………….. 42 2.3 设计触屏界面交互 ………………………. 44 2.3.1 简约的小屏幕网格 ……………. 45 2.4 为小屏幕设计内容 ………………………. 47 2.4.1 在布局中使用 web字体 ……. 48 2.5 总结 ……………………………. 51 2.6 讨论的观点 ……………………….. 51第2部分 响应式web设计之旅 3 使用样式板表达设计.. 55 3.1 利用设计指南进行可视化设计 …….. 56 3.1.1 设计指南是什么 ……………….. 573.1.2 开发一个设计指南 ……………. 58 3.1.3 样式板：创建一种视觉语言 59 3.2 如何创建一个样式板 …………………… 60 3.2.1 获得反馈 ………………………….. 61 3.2.2 设计样式板 ………………………. 61 3.2.3 创建样式板 ………………………. 63 3.2.4 利用样式板进行迭代设计 …. 68 3.3 模型之死 ……………………… 69 3.4 总结 ……………………………….. 70 3.5 讨论的观点 ………………………. 70 4 响应式用户体验设计模式 ………………….. 714.1 一级导航 …………………………………….. 73 4.1.1 toggle导航模式 ………………… 74 4.1.2 select menu导航模式 ………… 79 4.1.3 toggle导航和 select menu导航的比较 ………….. 814.2 多级toggle导航 ………………………….. 82 4.3 响应式用户体验设计模式资源 …….. 87 4.4 总结 ……………………………………………. 87 4.5 讨论的观点 …………………………………. 88 5 响应式布局…………… 89 5.1 利用百分比进行流式布局 ……………. 90 5.1.1 css中的百分比是如何工作的 …………………. 90 5.1.2 box-sizing …………………………. 94 5.1.3 流式网格系统 …………………… 975.2 构建一个流式布局 …………………….. 101 5.2.1 解读原型 ………………………… 101 5.2.2 开始编码 ………………………… 102 5.2.3 让 off-canvas元素动起来 … 105 5.2.4 使元素具有响应性 ………….. 106 5.2.5 拓展到更宽的视图 ………….. 109 5.3 总结 ……………………………… 110 5.4 讨论的观点 ……………………………….. 1106 添加内容模块和排版.113 6.1 添加内容模块 ……………………………. 115 6.1.1 创建有用的内容占位符 …… 116 6.2 响应式设计中的排版 …………………. 121 6.2.1 嵌入式字体 …………………….. 121 6.2.2 设置一个排版基础 ………….. 123 6.3 总结 ………………………………. 126 6.4 讨论的观点 ……………………………….. 126第3部分 用代码来延伸设计 7 用css在浏览器中增加图形………………….129 7.1 利用css实现设计 ……………………… 130 7.1.1 css基础 ………………………… 131 7.1.2 在流体结构中维持比例 …… 133 7.2 在你的设计中使用icon字体 ……….. 136 7.2.1 在用户界面中使用雪碧图 .. 137 7.2.2 基于字体的用户界面图形 .. 138 7.3 使用可缩放矢量图形 …………………. 140 7.3.1 为页面添加 svg图像 …….. 141 7.3.2 用 css实现 svg ……………. 144 7.3.3 svg格式的局限性 …………. 146 7.4 总结 ……………………………. 147 7.5 讨论的观点 ……………………………….. 148 8 渐进增强和modernizr的过时控制………………..149 8.1 技术性过时 ……………………………….. 150 8.1.1 渐进增强 ………………………… 150 8.1.2 优雅降级 ………………………… 154 8.2 modernizr是什么 ……………………….. 155 8.2.1 初始化 modernizr ……………. 157 8.2.2 利用 modernizr写跨浏览器的 css ………………… 159 8.3 用modernizr进行javascript特性检测 ……………… 162 8.3.1 检测触摸能力 …………………. 163 8.3.2 使用 modernizr.load和 yepnope ………………….. 164 8.3.3 创建定制的 modernizr测试 ……………………….. 165 8.4 在网站中添加modernizr …………….. 166 8.5 总结 …………………………………. 169 8.6 讨论的观点 ……………………
封面
书名:响应式Web
作者:卡弗
页数:197
定价:¥65.0
出版社:电子工业出版社
出版日期:2016-01-01
ISBN:9787121274442
PDF电子书大小:34MB 高清扫描完整版