响应式Web设计

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

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

译者序
作者简介
审校者简介
前言
第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