学习响应式设计(Learning Responsive Web Design) PDF 高清版

想要为平板、手机、笔记本、大屏幕设备，甚至可穿戴设备提供最优的用户体验？那就学习响应式设计吧。这是一本内容特别全面、讲解非常透彻的入门书。特别地，通过这本书不仅能迅速掌握响应式Web设计的基本原理，还能够从头到尾了解响应式设计的工作流程：从项目启动开始，到项目最终上线为止。

只要你的工作与创建、改造或者升级网站有关系，都应该看看这本书。换句话说，不仅是前端开发人员，设计师、产品经理、项目经理，甚至后端开发人员也可以通过本书掌握响应式设计的精髓所在。这本书基于响应式设计的前沿技术和社区经验写成，汇集了前人的智慧和最佳实践。希望读者能够“站在巨人的肩膀上”，把这本书的内容应用到未来的项目中，造福更多用户。

1. 内容策略的制定应先于视觉设计
2. 默认设计应针对最窄屏幕宽度进行
3. 响应式Web设计的关键：HTML元素和CSS属性
4. 基于设备视口宽度，通过媒体查询显示不同的CSS样式
5. 处理图像、文字排版和导航
6. 采用性能优化技术建立更轻量级、更快的网站

目录

• 前言 　　XV
• 第一部分　响应式设计基础
• 第1章　什么是响应式设计 　　3
• 1.1　一点儿基础 　　3
• 1.2　简史 　　6
• 1.2.1　固定宽度设计 　　6
• 1.2.2　移动Web 浏览 　　7
• 1.2.3　移动网站 　　8
• 1.2.4　更多的设备　 　　9
• 1.2.5　媒体查询 　　10
• 1.2.6　灵活性 　　11
• 1.2.7　响应式网页设计 　　12
• 1.3　为什么是响应式设计 　　12
• 1.3.1　每个设备都得到正确的设计 　　12
• 1.3.2　更少的工作 　　14
• 1.3.3　搜索优化 　　14
• 1.4　总结 　　15
• 第2章　响应式内容 　　16
• 2.1　内容策略 　　16
• 2.2　内容整理 　　18
• 2.2.1　仅使用你需要的 　　18
• 2.2.2　如何精简 　　19
• 2.2.3　内容审计 　　20
• 2.3　内容编写 　　20
• 2.3.1　用户如何阅读 　　20
• 2.3.2　简明的语言 　　22
• 2.4　内容平等 　　23
• 2.5　内容管理 　　24
• 2.6　自适应内容 　　24
• 2.7　总结 　　27
• 第二部分　创建响应式网站
• 第3章　响应式网站之HTML 　　31
• 3.1　使用HTML　　32
• 3.1.1　HTML 版本 　　32
• 3.1.2　Web 标准 　　33
• 3.1.3　使用HTML5 　　33
• 3.2　页面基本结构 　　34
• 3.2.1　文档类型声明 　　34
• 3.2.2　文档结构 　　34
• 3.2.3　页面标题 　　35
• 3.2.4　字符集 　　36
• 3.3　视口 　　37
• 3.3.1　宽度 　　40
• 3.3.2　初始缩放比 　　40
• 3.3.3　用户可缩放 　　40
• 3.3.4　最大缩放比 　　41
• 3.4　结构性元素 　　41
• 3.4.1　屏幕阅读器 　　42
• 3.4.2　<header> 　　43
• 3.4.3　<nav> 　　43
• 3.4.4　<footer> 　　43
• 3.4.5　<article> 　　44
• 3.4.6　<aside> 　　44
• 3.4.7　IE 支持 　　44
• 3.5　创建一个页面 　　45
• 3.5.1　结构性元素 　　45
• 3.5.2　加入内容 　　46
• 3.5.3　无样式页面 　　47
• 3.6　清晰和语义化的HTML　　48
• 3.6.1　分离内容与表现 　　48
• 3.6.2　注释 　　49
• 3.7　总结 　　50
• 第4章　响应式网站之CSS 　　51
• 4.1　CSS 的工作方式 　　52
• 4.2　CSS 版本 　　53
• 4.3　置CSS 于何处 　　57
• 4.3.1　嵌入式样式 　　57
• 4.3.2　样式表 　　58
• 4.3.3　内联样式 　　59
• 4.4　层叠 　　59
• 4.4.1　层叠的作用方式 　　59
• 4.4.2　重要的规则 　　60
• 4.4.3　内联样式 　　60
• 4.4.4　ID 选择器 　　60
• 4.4.5　类、属性和伪类选择器 　　61
• 4.4.6　元素与伪元素选择器 　　61
• 4.4.7　继承规则 　　61
• 4.4.8　默认值 　　62
• 4.4.9　发生冲突怎么办 　　62
• 4.5　使用层叠 　　62
• 4.5.1　默认值和重置 　　63
• 4.5.2　继承规则 　　64
• 4.5.3　元素规则 　　64
• 4.5.4　其他规则 　　65
• 4.5.5　保持简单 　　65
• 4.6　注释 　　66
• 4.7　组织你的样式表 　　66
• 4.8　盒模型 　　67
• 4.8.1　度量单位 　　68
• 4.8.2　em　　68
• 4.8.3　高度与宽度 　　69
• 4.8.4　外边距与内边距 　　70
• 4.8.5　边框 　　71
• 4.8.6　盒子大小 　　72
• 4.9　显示 　　74
• 4.10　定位 　　75
• 4.10.1　静态定位 　　75
• 4.10.2　相对定位 　　75
• 4.10.3　绝对定位 　　76
• 4.10.4　固定定位 　　77
• 4.10.5　定位元素的度量单位 　　78
• 4.11　浮动和清除 　　79
• 4.12　基本样式 　　81
• 4.13　总结 　　83
• 第5章　媒体查询 　　85
• 5.1　何为媒体查询 　　85
• 5.2　媒体查询结构 　　87
• 5.3　在样式表链接中使用媒体查询 　　89
• 5.4　使用媒体查询的其他方式 　　90
• 5.5　我们可以查询什么 　　91
• 5.5.1　视口宽度和高度 　　91
• 5.5.2　屏幕宽度与高度 　　92
• 5.5.3　方向 　　92
• 5.5.4　宽高比 　　92
• 5.5.5　分辨率 　　93
• 5.5.6　其他媒体特性 　　93
• 5.6　浏览器支持 　　94
• 5.6.1　IE 条件注释 　　94
• 5.6.2　测试媒体查询结果 　　96
• 5.7　断点 　　96
• 5.8　设计范围 　　97
• 5.9　响应式设计 　　98
• 5.9.1　渐进增强 　　98
• 5.9.2　用网格进行设计 　　99
• 5.9.3　使用网格列 　　100
• 5.9.4　优先为小屏幕设计 　　101
• 5.10　使用媒体查询 　　102
• 5.11　两列布局 　　102
• 5.11.1　使用浮动 　　103
• 5.11.2　使用网格 　　105
• 5.11.3　加入媒体查询 　　107
• 5.12　设置最大宽度 　　108
• 5.13　如何选择断点 　　109
• 5.14　总结 　　110
• 第6章　图像 　　111
• 6.1　显示图像的方式 　　112
• 6.1.1　CSS 替代方案 　　112
• 6.1.2　内容图像 　　113
• 6.1.3　背景图像 　　113
• 6.1.4　图像拼合 　　113
• 6.1.5　图标字体 　　114
• 6.2　替代文本 　　115
• 6.3　图像文件格式 　　118
• 6.3.1　JPEG 　　119
• 6.3.2　GIF 　　119
• 6.3.3　PNG 　　120
• 6.3.4　SVG 　　120
• 6.4　优化图像 　　121
• 6.4.1　像素与分辨率 　　121
• 6.4.2　高密度屏幕 　　122
• 6.4.3　压缩图像 　　123
• 6.4.4　实际尺寸 　　124
• 6.5　内容图像 　　126
• 6.5.1　<img> 元素 　　126
• 6.5.2　加入图像 　　127
• 6.5.3　灵活的图像尺寸 　　129
• 6.5.4　媒体查询 　　130
• 6.5.5　最大宽度 　　132
• 6.5.6　用图像叙事 　　134
• 6.6　背景图像 　　134
• 6.6.1　加入背景图像 　　135
• 6.6.2　对齐 　　136
• 6.7　响应式图像 　　137
• 6.7.1　建议的客户端解决方案 　　138
• 6.7.2　其他解决方案 　　139
• 6.7.3　断点 　　143
• 6.8　总结 　　145
• 第三部分　玩转响应式设计
• 第7章　响应式设计工作流程　　149
• 7.1　策略与规划 　　149
• 7.1.1　用户研究 　　150
• 7.1.2　内容 　　150
• 7.2　内容先于布局 　　152
• 7.2.1　内容组件 　　152
• 7.2.2　以文本模式进行设计 　　153
• 7.2.3　线性设计 　　155
• 7.2.4　内容层次 　　155
• 7.3　考虑布局 　　155
• 7.3.1　草图绘制 　　155
• 7.3.2　从小屏幕开始 　　156
• 7.3.3　移动优先 　　157
• 7.4　原型 　　158
• 7.4.1　线框图与原型 　　158
• 7.4.2　线框图 　　158
• 7.4.3　响应式原型 　　159
• 7.4.4　原型中有什么 　　160
• 7.4.5　从基础开始 　　160
• 7.4.6　创建页面布局 　　160
• 7.4.7　框架 　　162
• 7.4.8　原型创建工具 　　163
• 7.5　视觉设计 　　164
• 7.5.1　样式板 　　164
• 7.5.2　测试与调整 　　165
• 7.5.3　风格指南 　　166
• 7.6　响应式设计工具 　　168
• 7.6.1　Adobe Photoshop 　　168
• 7.6.2　Adobe InDesign 　　168
• 7.6.3　Adobe Edge Reflow 　　169
• 7.6.4　Adobe Dreamweaver 　　170
• 7.6.5　浏览器 　　171
• 7.7　推销响应式设计 　　172
• 7.7.1　为什么要用响应式设计 　　172
• 7.7.2　教育你的客户 　　173
• 7.7.3　强调响应性 　　173
• 7.7.4　响应式设计并不总是最佳选择 　　174
• 7.7.5　费用 　　174
• 7.8　与客户合作 　　175
• 7.8.1　交付物 　　175
• 7.8.2　陈述报告 　　176
• 7.9　总结 　　177
• 第8章　岂止手机 　　178
• 8.1　用户体验 　　178
• 8.1.1　用户至上 　　179
• 8.1.2　手机用户的谬见 　　180
• 8.1.3　为应用环境设计 　　180
• 8.1.4　只用手机的用户 　　181
• 8.1.5　使用多个设备 　　182
• 8.2　设备无关的设计 　　182
• 8.3　专注于移动优先 　　183
• 8.4　尽你所能 　　183
• 8.5　设备类型 　　186
• 8.5.1　手机 　　186
• 8.5.2　平板电脑 　　187
• 8.5.3　其他设备 　　187
• 8.5.4　台式电脑与笔记本电脑 　　188
• 8.6　触摸 　　188
• 8.6.1　电容式触摸 　　189
• 8.6.2　多点触摸 　　189
• 8.6.3　手势 　　189
• 8.6.4　JavaScript 事件 　　190
• 8.6.5　触摸目标大小 　　191
• 8.6.6　导航位置 　　193
• 8.7　屏幕尺寸 　　194
• 8.8　可访问性（通用化设计） 　　196
• 8.8.1　视觉 　　197
• 8.8.2　音频 　　199
• 8.8.3　输入方法 　　200
• 8.8.4　认知障碍 　　201
• 8.9　决定支持哪些设备 　　201
• 8.10　为何要用真实设备进行测试 　　202
• 8.10.1　设备实验室 　　203
• 8.10.2　购买设备 　　203
• 8.11　测试 　　203
• 8.11.1　验证器 　　204
• 8.11.2　在浏览器窗口调整 　　204
• 8.11.3　浏览器工具 　　204
• 8.11.4　浏览器与操作系统 　　205
• 8.11.5　仿真器与模拟器 　　206
• 8.11.6　辅助技术 　　207
• 8.12　总结 　　207
• 第四部分　设计响应式网站
• 第9章　文字排版 　　211
• 9.1　始于HTML　　212
• 9.2　字型 　　212
• 9.3　使用字体 　　214
• 9.3.1　设计良好的字体 　　214
• 9.3.2　自托管字体 　　214
• 9.3.3　字体服务 　　215
• 9.3.4　链接字体文件 　　216
• 9.3.5　创建字体栈 　　217
• 9.4　调整文字大小 　　218
• 9.4.1　忘掉像素 　　218
• 9.4.2　屏幕距离 　　218
• 9.4.3　绝对与相对 　　219
• 9.4.4　设置默认字体大小 　　220
• 9.4.5　为什么是100% 　　220
• 9.4.6　度量单位 　　221
• 9.4.7　字体大小间的关系 　　225
• 9.4.8　行高 　　225
• 9.5　行长 　　227
• 9.5.1　测试行长 　　228
• 9.5.2　调整外边距及字体大小 　　229
• 9.5.3　断字 　　231
• 9.5.4　溢出换行 　　232
• 9.6　留白 　　233
• 9.7　内边距和外边距 　　234
• 9.8　为屏幕尺寸改变字型 　　234
• 9.9　总结 　　235
• 第10章　导航及页眉布局 　　237
• 10.1　响应式导航 　　237
• 10.1.1　从小屏开始 　　238
• 10.1.2　样式化列表 　　238
• 10.1.3　水平导航 　　240
• 10.2　网站品牌 　　243
• 10.3　导航链接 　　245
• 10.3.1　灵活性 　　245
• 10.3.2　用户想要做什么 　　245
• 10.3.3　基于目标的导航 　　247
• 10.3.4　保持一致性 　　248
• 10.3.5　保持简单 　　250
• 10.4　导航模式 　　250
• 10.4.1　顶部导航 　　252
• 10.4.2　页脚导航 　　254
• 10.4.3　切换式推出型导航 　　256
• 10.4.4　切换式覆盖型导航 　　260
• 10.4.5　部分优先型导航 　　260
• 10.4.6　选择菜单型导航 　　261
• 10.4.7　抽屉式导航 　　263
• 10.4.8　底部导航 　　264
• 10.4.9　跳过子导航 　　266
• 10.4.10　被抛弃的导航 　　267
• 10.4.11　用于宽屏幕的固定菜单 　　269
• 10.5　页眉 　　270
• 10.5.1　极简页眉 　　270
• 10.5.2　复杂页眉 　　271
• 10.5.3　导航图标 　　273
• 10.5.4　其他图标 　　275
• 10.6　总结 　　277
• 第11章　性能 　　279
• 11.1　性能的重要性 　　280
• 11.2　性能作为设计元素 　　280
• 11.2.1　网络连接 　　281
• 11.2.2　平衡 　　281
• 11.2.3　臃肿的网络 　　281
• 11.3　网页加载与渲染方式 　　282
• 11.3.1　延迟 　　283
• 11.3.2　DNS 请求 　　283
• 11.3.3　重定向 　　284
• 11.3.4　HTTP 请求 　　284
• 11.3.5　发送HTML 文件 　　284
• 11.3.6　解压 　　285
• 11.3.7　DOM 　　285
• 11.3.8　渲染<head> 元素 　　286
• 11.3.9　渲染<body> 元素 　　287
• 11.3.10　onload 事件 　　287
• 11.4　性能测量 　　287
• 11.5　清理代码 　　289
• 11.5.1　使用简单直接的代码 　　289
• 11.5.2　缩小 　　290
• 11.6　将HTTP 请求减至最少 　　291
• 11.6.1　串联 　　291
• 11.6.2　第三方代码 　　292
• 11.6.3　图像拼合 　　293
• 11.7　服务器设置 　　293
• 11.7.1　避免重定向 　　293
• 11.7.2　文件压缩 　　294
• 11.7.3　浏览器缓存 　　295
• 11.8　JavaScript 　　296
• 11.8.1　JavaScript 做什么 　　296
• 11.8.2　JavaScript 的工作方式 　　296
• 11.8.3　阻塞式JavaScript 　　297
• 11.8.4　JavaScript 库 　　300
• 11.9　CSS 　　301
• 11.10　托管 　　302
• 11.10.1　内容分发网络 　　302
• 11.10.2　内容管理系统 　　303
• 11.11　有条件地加载内容 　　303
• 11.12　重绘与回流 　　305
• 11.13　RESS 　　305
• 11.14　总结 　　307