本书介绍了响应式网页设计的技术架构及设计要领，使用HTML与CSS设计网站的基本策略与技术，以及响应式网页设计的模块应用，包括自适应/响应式网页设计的概述、网页新旧切版的方式和字体资源、版型尺寸的固定与弹性、Bootstrap的学习与使用、Foundation的学习与使用、Pure的学习与使用。

　　序1
　　响应式网页设计就是本书的核心。在智能手机、平板电脑等移动设备大行其道的时候，网页设计人员如果不会灵活和熟练地运用响应式网页设计技术将电脑桌面网页设计技术拓展到移动设备上，那么不但自己会疲于奔命，而且最终会被市场 淘汰。
　　本书以丰富的范例程序和详细的图解逐一讲解响应式网页设计的核心技术和方法，这种网页设计技术和方法会根据用户所使用设备的浏览器环境（例如屏幕的长度、宽度、长宽比、分辨率或设备屏幕显示的方向等）自动调整网页的版面，将恰当的内容和最佳的显示结果提供给用户。简而言之，就是网页设计人员只要设计统一版本的网页程序，就能在电脑、智能手机和平板电脑等各种设备上完整展示网页内容，而无需为不同屏幕大小和功能的设备分别设计和改写网页程序。
　　本书涉及的内容包括HTML4、HTM5、JavaScript和CSS，读者需要具备一些相关方面的知识，才能在学习时事半功倍。
　　HTML5 标准相对比较新，并不是所有的浏览器或者它们的旧版本都能完整地支持本书中含有HTML5语言功能的部分范例程序。要正确地运行这些范例程序，建议使用最新版本的浏览器，本书的所有范例程序都在Chrome 版本47（谷歌的浏览器）上调试并通过。
　　当然，支持HTML5的浏览器还有Windows 10中的Microsoft Edge、Internet Explorer 11、Opera 版本33.0以上以及Firefox（火狐浏览器）和Safari等的最新版本。另外，还有国内的 QQ浏览器、猎豹浏览器等的新版本。如果读者想在这些浏览器上运行 HTML5 的程序，请先阅读版本说明中对 HTML5 支持程度的细节说明。
　　赵 军　　2016年8月序2　　本书与业界其他相关书的不同之处在于，其各章节涉及的内容都和响应式网页设计的技术架构有关。第 1 章是关于自适应 / 响应式网页设计的概述，第 2 章介绍网页新旧切版的方式和字体资源，第 3 章介绍版型尺寸的固定与弹性，第 4 章介绍 Bootstrap 的学习与使用，第 5 章介绍 Zurb’s Foundation 的学习与使用，第 6 章介绍 Yahoo’s Pure 的学习与使用。
　　为了能更好地理解第 2 章开始的各个范例程序，读者需要具备HTML、CSS 和 JavaScript 的相应知识。若没有这些基础知识，而试图直接通过各个章节的内容来理解各个范例程序，则势必会事倍功半、劳心不已……希望没有基础的初学者，先去学习上述的基础知识，有牢固的根基才好！
　　从第 4 章开始的内容着重于更为全面的响应式网页设计模块的应用，以指导程序设计人员更快速地创造出具有特定质感和风格的各个组件。各个组件所对应的模块原则上都被打包在外部 CSS 文件和 JS 文件中，并通过 HTML 语句在特定网页中显示出各个组件的外观。
　　第 4 章至第 6 章分别介绍不同厂商免费提供的组件模块，可以通过 CSS 文件和 JS 文件的链接语句，使得隶属于不同厂商的各个组件模块同时应用于同一个网页当中，再经由美编人员尽量使此网页里的各个组件模块呈现出同一质感和风格，以营造出网页中统一的整体外观。
　　本书章节内容的安排经由作者巧思而成，以便读者能够轻松驾驭，逐步理解本书的精髓，同时辅以易于测试和操作的范例程序，让读者详细了解程序的运行原理。相对而言，第 4 章到第 6 章的一些范例程序有些烦琐与复杂，因此以特定的程序代码区段为单位来测试其显示的组件外观，是一种较为惬意的学习方式。
　　本书是一本程序设计参考书，读者若觉得一大段程序代码让自己感到心烦且有压力感，不妨先看懂特定程序代码所对应的说明文字，并对自己不熟悉的英文单词做个记号，通过在线英文字典进行查询，以加快自己对程序代码的深度理解。
　　随着时间的推移，本书所用到的各厂商的组件模块也会改版，因此在网络云盘中提供了各章的范例程序文件。如果下载有问题，请电子邮件联系，邮件主题为“响应式网页设计实战”。
　　在此恭祝各位读者在学习上百尺竿头更进一步，不懈努力，持之以恒，蒸蒸日上，事半功倍！
　　编 者

序
第1章 自适应 / 响应式网页设计概述 1
1.1 弹性的样式与版面 1
1.2 以移动设备为优先 1
1.3 业界流行的 RWD Framework 2
1.4 并非一定需要 RWD Framework 2
1.5 RWD实现的机制 5
1.6 浏览器的支持度 5
第2章 网页的新旧切版方式和字体资源 7
2.1 程序代码的编辑器 7
2.2 CSS搭配HTML4切版方式 7
2.2.1 开始切版前的HTML基本程序代码结构 7
2.2.2 规划要创建的版面 8
2.2.3 建立区块的程序代码 9
2.2.4 标示区块的范围 9
2.2.5 设置区块尺寸 10
2.2.6 限定版面总宽度 12
2.2.7 设置区块为浮动排列 12
2.2.8 调整各区块的间距 14
2.2.9 版面的居中对齐 15
2.2.10 改用百分比作为显示度量单位 16
2.3 CSS 搭配HTML5 切版方式 18
2.3.1 建立区块的程序代码 20
2.3.2 标示区块范围 20
2.3.3 设置区块尺寸 21
2.3.4 限定版面的总宽度 23
2.3.5 设置区块为浮动排列 24
2.3.6 调整各区块的间距 25
2.3.7 版面的居中对齐 27
2.3.8 改用以百分比为显示度量单位 28
2.4 CSS 搭配JavaScript 切版方式 30
2.4.1 精简原有的程序代码 30
2.4.2 注释掉整段 CSS 规则语句 32
2.4.3 用 JavaScript 程序代码实现特定版型 32
2.4.4 JavaScript 版型程序代码的第 1 阶段简化 33
2.4.5 JavaScript 版型程序代码的第2阶段简化 34
2.5 跨网域运用在线字体 35
2.6 使用本地的字体 38
第3章 版型尺寸的固定与弹性 42
3.1 HTML 传统方式 42
3.2 CSS应用方式 45
3.2.1 @media语句 45
3.2.2 meta viewport语句 51
3.3 JavaScript搭建方式 52
第4章 Bootstrap 的学习与使用 56
4.1 Twitter的 Bootstrap 简易应用方式 56
4.2 免费小图标 58
4.3 下拉式或上拉式菜单 59
4.3.1 下拉式菜单 59
4.3.2 上拉式菜单 61
4.3.3 具有选项分隔线的下拉式菜单 61
4.3.4 具有选项分类和选项分隔线的下拉式菜单 62
4.4 一般按钮和按钮组 64
4.4.1 按钮组 64
4.4.2 按钮组的工具栏 64
4.5 带有菜单按钮的按钮组 65
4.5.1 横向按钮组 65
4.5.2 纵向按钮组 66
4.5.3 窗口宽度型 67
4.5.4 分离型按钮组 68
4.6 不同尺寸的按钮 69
4.6.1 大尺寸按钮 69
4.6.2 标准尺寸的上拉式菜单按钮 70
4.6.3 小尺寸按钮 71
4.6.4 特小尺寸按钮 72
4.7 窗体中的文本栏 73
4.7.1 标签文字组合式 74
4.7.2 单选按钮和多选按钮组合式 75
4.7.3 一般按钮组合式 76
4.7.4 下拉式菜单按钮组合式 77
4.8 窗体中的导航栏 79
4.8.1 默认的标签型导航栏 79
4.8.2 简易标签型导航栏 80
4.8.3 具有窗口宽度的堆栈式导航栏 80
4.8.4 均分窗口宽度的标签型导航栏 80
4.8.5 动态置顶导航栏 82
4.9 浏览分层提示和分页 84
4.9.1 浏览分层提示 84
4.9.2 分页导航栏 85
4.9.3 前一页和下一页按钮 86
4.10 文字标签、文字徽章与文字框 87
4.10.1 文字标签 87
4.10.2 文字徽章 87
4.10.3 文字框 88
4.11 缩略图与图解说明 89
4.12 警告文字框 91
4.13 进度条 92
4.14 媒体对象 95
4.14.1 一般图片列表 95
4.14.2 多层次图片列表 97
4.15 列表分组 100
4.15.1 默认的列表分组 100
4.15.2 加上数值徽章的列表分组 101
4.15.3 按钮型列表分组 102
4.15.4 应用颜色样式的列表分组 103
4.15.5 带有内容的列表分组 104
4.16 面板 105
4.16.1 一般面板 105
4.16.2 带有表格内容的面板 107
4.16.3 带有列表分组内容的面板 109
4.17 自适应嵌入 110
第5章 Zurb’s Foundation的学习与使用 112
5.1 Zurb’s Foundation 简易应用方式 112
5.2 滑入菜单 113
5.2.1 默认的滑入菜单 113
5.2.2 双边滑入菜单 114
5.2.3 双边多层次滑入菜单 118
5.3 置顶导航栏 122
5.4 工具栏与内置小图标 125
5.4.1 跨窗口宽度的工具栏 125
5.4.2 纵向工具栏 126
5.4.3 内置图标工具按钮所构成的工具栏 127
5.5 侧边导航栏 128
5.6 动态置顶追踪型导航栏 129
5.7 子导航栏 131
5.8 浏览分层提示 132
5.9 分页导航栏 133
5.10 缩略图 134
5.11 缩放式视频 137
5.12 窗体组件 138
5.13 切换按钮 148
5.14 滑杆 151
5.15 窗体验证 156
5.16 按钮 160
5.17 按钮组 162
5.18 分割下拉式菜单按钮组 167
5.19 整体下拉式菜单按钮 169
5.20 字体样式 171
5.21 行内列表 173
5.22 文字标签 173
5.23 modal 窗格 174
5.24 警告框 180
5.25 面板框 182
5.26 动态提示框 183
5.27 页面操作展示 185
5.28 简易型下拉式菜单与下拉式内容框 189
5.29 价目表 192
5.30 进度条 193
5.31 表格 194
5.32 折叠式面板 195
5.33 标签面板 203
5.34 均分版型 206
第6章 Yahoo’s Pure的学习与使用 210
6.1 Yahoo’s Pure 简易应用方式 210
6.2 版型网格和最小容器单元 210
6.3 窗体组件 213
6.4 按钮 222
6.5 表格 224
6.6 菜单 229