移动互联网时代到来了。本书将当前web 设计中热门的响应式设计技术与html5 和css3 结合起来，为读者全面深入地讲解了针对各种屏幕大小设计和开发现代网站的各种技术。不仅讨论了媒体查询、流式布局、相对字体、响应式媒体，更将html5 和css3的相关知识点一并讲解，是学习最新web 设计技术不可多得的佳作。

本书由资深Web开发工程师撰写，通过大量真实的示例，详细介绍新的开发工具集，深入阐释响应式Web设计的各种实用技术和新方法，帮助你快速掌握响应式Web设计的精髓。
全书共分为7章，涵盖响应式元素和媒介、响应式字体、响应式布局、媒介查询、响应式框架、响应式内容优化，以及使用JavaScript和jQuery实现非侵入式交互等主题，从准备工作、实现方式和工作原理三部分全面讲述响应式Web设计所涉及的各种技术和方法，并提供具体的实现代码，便于读者参考实践。

资深Web开发工程师亲笔撰写，Amazon广泛好评，完全掌握下一代设备和浏览器技术的必备指南
从准备工作、实现方式和工作原理三方面，通过大量真实示例，全面而系统地讲解HTML5和CSS3响应式Web设计与开发的各种实用技术和技巧

针对最新的设备和移动Web，我们如何改进和优化网站设计来更好地呈现网站内容？本书详细讲解了响应式Web设计的具体操作方法、各种实用技术和技巧。书中首先介绍如何使图片自适应页面尺寸、制作响应式菜单、嵌入响应式视频，以及利用大量响应式字体技术，接下来讲述如何使用框架创建布局，创建迷人的响应式网站，以及仅使用几行CSS代码来改进现有框架以应用于响应式网站中。本书是完全掌握下一代设备和浏览器技术的必备指南。
通过阅读本书，你将学到：
响应独特显示终端的响应式布局的制作原则
制作响应式字体，使其在所有设备上都容易阅读-——在小型移动设备屏幕上轻松阅读文本
使用jQuery Mobile库和移动设备优先的设计理念来创建移动站点
发现如何获取创建、部署、测试响应式网站的一系列工具
学习服务器端及客户端媒介部署技术，提供可适应于任何媒介设备的平台
利用可直接应用到现有项目中的设计和代码


作者简介
Benjamin LaGrone 资深Web开发工程师，拥有丰富的Web开发经验，专注于移动设备和互联网项目，热衷于响应式Web设计。他现在就职于SAAS，是开发团队移动和响应式设计的传道者。
译者简介
黄博文?思特沃克高级软件工程师，精通C#、Java、JavaScript等语言，具有丰富的自动化测试经验和持续集成、持续部署等DevOps经验。个人博客：www.huangbowen.net。
饶勋荣?目前为成都思特沃克咨询师，拥有多年的软件开发和测试经验，涉及项目包括KVM虚拟机移植、IM服务器开发、Android客户端开发等。关注与搜索引擎相关的领域，对于大数据有着较为浓厚的兴趣。

本书提供了新的开发工具箱，保证开发者从中获取到最新的设计和开发技能。掌握了本书中所介绍的方法之后，你就能构建响应式应用程序，并且使得Web项目的移动版本能够按照最新的理念进行开发和设计也是其一大优势。本书中的示例都是真实的，通过类似于对站点改进的形式，在易于理解的描述下对照示例一步一步地实践，使得读者能够理解响应式设计的精髓，并可以完成一系列设备的响应式设计优化。本书中的主题涵盖了响应式元素和媒介、响应式字体、响应式布局，使用媒介查询，学习最新的响应式框架，开发移动设备优先的Web应用程序，优化响应式内容，使用JavaScript和jQuery实现无侵入式的交互。每节所对应的方法都能直接通过所提供的代码实现。
本书内容
第1章涵盖元素创建，用于移动设备或台式机的优化。
第2章介绍如何使用流式字体，创建很棒的字体效果，以及使用HTML5画布和CSS3实现字体的立体特效。
第3章讲述如何创建可实际应用到项目中的响应式布局。你将学会如何使用视窗和媒介查询，使得Web站点在不同视区大小和类型下变成响应式。
第4章介绍如何使用新型框架，通过最新的响应式方法和交互方式，既快速又可靠地完成响应式站点的设计和交付，以及如何将旧的静态框架转换为响应式类型的框架。
第5章讨论如何实现Web应用程序的移动版本。该章通过jQueryMobile优先针对移动设备优化，并针对桌面视窗进行了优化。
第6章介绍如何获取用以构建和测试响应式Web项目的各种工具，并能够正确地使用。
第7章介绍如何编写独立于Web页面的JavaScript，以便为不同设备实现响应式交互打下基础。
准备事项
你需要一个IDE（集成开发环境），推荐NetBeans或Eclipse（有操作指南指导如何使用）。还需要图像编辑软件，如Photoshop或GIMP。另外还要有一台Web服务器和一台本地服务器，如Apache或者其他本地托管应用程序，如XAMPP或MAMPP。
读者对象
本书介绍的方法适用于当今所有无线网络设备，同时能够为Web开发者带来所期望的更快交付的革新技术，也为最新的移动网络设备提供更加直观的交互方式。
提醒或重要的事项以这种格式呈现。
提示及小窍门以这种格式呈现。
读者反馈
我们永远欢迎来自读者的反馈。请让我们知道你对本书的想法，包括喜欢的内容或可能不怎么喜欢的部分。读者反馈对我们非常重要，有助于帮助我们今后出版优秀的图书。
可以通过发送邮件到，给我们提出最宝贵的反馈信息，只需要在邮件的主题中提到本书即可。
如果你是本书中某一个主题方面的专家，同时也有兴趣写一些东西或贡献自己的力量，就请访问作者指南页面www.packtpub.com/authors。
客户支持
恭喜你拥有本书。我们准备了以下内容来让你的购买价值最大化。

计算机\Web设计

对于最新的设备和移动Web，我们如何改进和优化网站设计来更好地呈现网站内容？本书详细讲解了响应式Web设计的具体操作方法、各种实用技术和技巧。书中首先介绍如何使图片自适应页面尺寸、制作响应式菜单、嵌入响应式视频，以及利用大量的响应式字体技术，接下来讲述如何使用框架创建布局,创建迷人的响应式网站，以及仅使用几行CSS代码来改进现有框架以应用于响应式网站中。本书是完全掌握下一代设备和浏览器技术的必备指南。
通过阅读本书，你将学到：
• 响应独特显示终端的响应式布局的制作原则
• 制作响应式字体，使其在所有设备上都容易阅读-——在小型移动设备屏幕上轻松阅读文本
• 使用jQuery Mobile库和移动设备优先的设计理念来创建移动站点
• 发现如何获取创建、部署、测试响应式网站的一系列工具
• 学习服务器端及客户端媒介部署技术，提供可适应于任何媒介设备的平台
• 利用可直接应用到现有项目中的设计和代码

（美）Benjamin LaGrone 著：暂无简介

黄博文　饶勋荣 译：暂无简介

“不是我不明白，这世界变化快。”崔健这首歌中的歌词使用在互联网领域最合适不过。只短短数年的工夫，互联网的浪潮还没过去，移动互联网的时代已经来临。人们已经习惯将越来越多的时间花在各种移动设备上。各大互联网公司先知先觉，在移动互联网领域杀得不可开交，甚至很多传统行业公司也在积极寻求自身领域与移动互联网的结合点。
终端设备种类繁多，要给所有用户群带来一致的用户体验实属不易。在这种背景下，响应式设计应运而生。响应式Web设计的理念是，页面的设计与开发应当根据用户行为及设备环境进行相应的响应和调整。响应式设计并不是单纯设计者的事情，它是一系列技术栈的结合。HTML5和CSS3酝酿了多年终于落地，其在响应式设计中扮演着举足轻重的角色。
本书作者Benjamin LaGrone具有丰富的互联网设计和开发经验。本书共7章，系统地介绍了利用HTML5和CSS3进行响应式Web设计的方方面面。每一节基本都分为准备工作、实现方式、工作原理三部分，每个知识点逐步展开。并且每节所对应的方法都有详细的示例代码，可供读者参考学习。
在翻译此书的过程中，我和同事饶勋荣合作非常愉快。同时也感谢机械工业出版社的编辑对我们工作的支持。另外，还要感谢家人对我的包容和照顾。
最后，希望本书能给大家带来超凡的阅读体验。

黄博文

译者序
作者简介
审校者简介
前言
第1章　响应式元素及媒介 / 1
1.1　简介 / 2
1.2　基于宽度百分比的图像缩放 / 2
1.3　基于cookie及JavaScript的响应式图像 / 5
1.4　使视频自适应于屏幕宽度 / 8
1.5　基于媒介查询的图像缩放 / 11
1.6　基于媒介查询的动态导航栏 / 13
1.7　基于尺寸的响应式内边距 / 18
1.8　基于CSS3按钮的进度条 / 19
第2章　响应式字体 / 25
2.1　简介 / 26
2.2　创建自适应的响应式字体 / 26
2.3　使用画布实现文本阴影 / 28
2.4　使用画布实现内侧阴影和外侧阴影 / 30
2.5　使用画布旋转文本 / 32
2.6　使用CSS3旋转文本 / 33
2.7　使用CSS3制作3D文本 / 35
2.8　基于文本遮罩的文本纹理 / 37
2.9　基于位置伪类的交替行样式 / 39
2.10　基于before及after伪元素添加字符 / 41
2.11　基于相对字体大小的按钮 / 42
2.12　为字体添加阴影效果 / 45
2.13　基于边框半径的圆角实现 / 47
第3章　响应式布局 / 51
3.1　简介 / 52
3.2　基于min-width和max-width属性的响应式布局 / 52
3.3　基于相对内边距的布局控制 / 55
3.4　为CSS添加媒介查询 / 58
3.5　基于媒介查询创建响应式宽度布局 / 62
3.6　基于媒介查询改变图片大小 / 68
3.7　基于媒介查询隐藏元素 / 70
3.8　创建平滑过渡的响应式布局 / 72
第4章　使用响应式框架 / 84
4.1　简介 / 85
4.2　使用流式960网格布局 / 85
4.3　使用Blueprint网格布局 / 90
4.4　基于三分法的流式布局 / 95
4.5　响应式960网格框架—Gumby / 101
4.6　易上手的Bootstrap框架 / 107
第5章　设计移动设备优先的Web应用 / 115
5.1　简介 / 116
5.2　使用Safari开发者工具的用户代理设置 / 116
5.3　通过Chrome插件设置用户代理 / 120
5.4　使用插件调整浏览器窗口大小 / 123
5.5　学习视窗及其相关选项 / 124
5.6　为jQuery Mobile添加标签 / 128
5.7　基于jQuery Mobile添加子页面 / 132
5.8　基于jQuery Mobile制作列表元素 / 135
5.9　基于jQuery Mobile开发具有移动设备外观的按钮 / 143
5.10　仅通过媒介查询为移动设备设置移动版本的样式表 / 150
5.11　仅为移动设备添加JavaScript功能特效 / 152
第6章　优化响应式内容 / 155
6.1　简介 / 156
6.2　使用IE开发者工具进行响应式测试 / 156
6.3　浏览器测试—使用插件 / 160
6.4　开发环境—使用免费IDE / 166
6.5　虚拟化—下载VirtualBox / 169
6.6　在Chrome中使用浏览器缩放工具 / 174
第7章　非侵入式JavaScript / 178
7.1　简介 / 179
7.2　基于非侵入式JavaScript编写“Hello World” / 179
7.3　基于事件监听器创建发光效果的“提交”按钮 / 183
7.4　制作鼠标悬停后的按钮突出效果 / 189
7.5　基于非侵入式jQuery改变页面元素大小 / 193
7.6　基于非侵入式JavaScript的密码遮罩 / 197
7.7　基于事件监听器实现图像阴影的动态效果 / 201