《回响式Web》全面介绍了回响式设计的概念以及技术技巧，由浅入深地讲解了其中原理性的知识。第1部分从开发者和设计师的角度介绍了回响式设计的基本概念。第2部分从开发者与设计师协作的角度介绍了如何进行回响式设计。第3部分对编码技巧和实战最佳化进行了介绍。

回响式设计是一种新的设计理念，需要你不断地学习、探索、实践。它会让你的网页内容在不同设备上展现得更加精彩。

第1部分　回响式之道

1　开启回响式之路 ..........3

1.1　初探回响式Web ................................... 5

1.1.1　什幺是回响式 Web .................. 5

1.1.2　关键特性 .................................. 8

1.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　设计指南是什幺 .................... 57

3.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　回响式用户体验设计模式 ....................... 71

4.1　一级导航 ............................................ 73

4.1.1　toggle导航模式 ..................... 74

4.1.2　select menu导航模式 ............ 79

4.1.3　toggle导航和 select menu导航的比较 .............. 81

4.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　流式格线系统 ........................ 97

5.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　讨论的观点 ...................................... 110

6　添加内容模组和排版.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　讨论的观点 ...................................... 170

9　回响式网站的测试和最佳化 ..........................171

9.1　什幺是回响式测试 .......................... 172

9.1.1　模拟测试环境 ...................... 172

9.2　用于测试的浏览器工具 .................. 176

9.3　使用Web审查器 ............................... 177

9.3.1　掌握 Web审查器 ................. 178

9.4　降低请求时间的技巧 ...................... 182

9.4.1　减少 HTTP请求 .................. 183

9.4.2　用 Base64编码减少图片请求 ...................... 184

9.4.3　载入速度的最佳化清单 .......... 184

9.5　总结 ................................. 186

9.6　讨论的观点 ................................. 186

附录A　设计中的上下文感知计算 .......................187

A.1　移动套用中的上下文感知 ............. 188

A.2　Web中的上下文感知 ...................... 189

A.2.1　上下文断点 ........................ 190

A.2.2　创建上下文测试 ................ 192

A.2.3　CSS上下文 ........................ 195

A.3　总结 .................................. 196

附录B　Foundation框架