![[美] Clarissa Peterson《学习响应式设计》](http://oss.shudanhao.com/caiji/chazidian/2023/1869.jpg)
[美] Clarissa Peterson《学习响应式设计》
书刊介绍
内容简介
想要为平板、手机、笔记本、大屏幕设备，甚至可穿戴设备提供最优的用户体验？那就学习响应式设计吧。这是一本内容特别全面、讲解非常透彻的入门书。特别地，通过这本书不仅能迅速掌握响应式Web设计的基本原理，还能够从头到尾了解响应式设计的工作流程：从项目启动开始，到项目最终上线为止。
只要你的工作与创建、改造或者升级网站有关系，都应该看看这本书。换句话说，不仅是前端开发人员，设计师、产品经理、项目经理，甚至后端开发人员也可以通过本书掌握响应式设计的精髓所在。这本书基于响应式设计的前沿技术和社区经验写成，汇集了前人的智慧和最佳实践。希望读者能够“站在巨人的肩膀上”，把这本书的内容应用到未来的项目中，造福更多用户。
内容策略的制定应先于视觉设计
默认设计应针对最窄屏幕宽度进行
响应式Web设计的关键：HTML元素和CSS属性
基于设备视口宽度，通过媒体查询显示不同的CSS样式
处理图像、文字排版和导航
采用性能优化技术建立更轻量级、更快的网站
作品目录
前言 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 使用HTML32
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
3.4.3
3.4.4
3.4.5
3.4.6
3.4.7 IE 支持 44
3.5 创建一个页面 45
3.5.1 结构性元素 45
3.5.2 加入内容 46
3.5.3 无样式页面 47
3.6 清晰和语义化的HTML48
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 em68
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 元素 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 始于HTML212
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 渲染
元素 28611.3.9 渲染
元素 28711.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
相关推荐
-
温暖的麦穗
《温暖的麦穗》内容简介：本书是国务院新闻办公室三局局长张雁彬的随笔散文集。书中收录了作者自大学毕业后在生活、工作中写下的一
-
《WiMAX/802.16原理与应用》书籍《WiMAX/802.16原理与应用》
随着多媒体业务不断地推陈出新，无线接入技术正呈现高带宽和IP化的趋势。作为新一代的宽带无线接入技术，WiMAX／802.16以自身固有
-
![[匈牙利] 欧文·拉兹洛《微漪之塘》](http://oss.shudanhao.com/caiji/chazidian/2023/899.jpg)
[匈牙利] 欧文·拉兹洛《微漪之塘》
--------------------------------------------------------------------------------...
-
《人工智能》书籍《人工智能》
本书是一本经典的人工智能教材。全面系统地阐述了人工智能的基础理论，有效结合了求解智能问题的数据结构以及实现的算法，把人工
-
单片机实验与实践教程(一)(第2版)
单片机实验与实践教程(一)(第2版) 内容简介 本书为《单片机系列教程》之一，较之第1版，在原用汇编语言编程的实验参考程序中，增加了部分C语言编程，使内容更加完...
-
什么是高中物理
《什么是高中物理》内容简介：几乎囊括了高中物理的所有知识点，流畅而有趣地讲述这些内容的来龙去脉，并以一个清晰的脉络串起来，
-
新少儿小提琴集体课教程 第六册
《新少儿小提琴集体课教程 第六册》内容简介：本教程里充满了音乐材料，从一开始到结束，都是大家熟知的民间音调和国外音乐材料，很
-
西方左翼学者的马克思主义观
《西方左翼学者的马克思主义观》内容简介：本书主要反映西方左翼学者（其中既包括西方马克思主义和后马克思主义思潮与流派的代表人
-
中国零售业发展监测与分析报告（2014）
《中国零售业发展监测与分析报告（2014）》内容简介：本书按年度全面监测中国零售业发展情况，分析中国零售业发展脉络，重点是中国
-
教琴日记
《教琴日记》内容简介：继我社已出版的《学琴日记》之后的延续产品《教琴日记》。当年的学琴少女许雪青已经成为了一名专业的钢琴教
-
我的精神家园
《我的精神家园》内容简介：《一只特立独行的猪》《沉默的大多数》《我的精神家园》三本杂文集，是走近王小波的三级台阶，本书是“
-
杜赫斯特《C++必知必会》
stephenc.dewhurst，贝尔实验室最早的c++程序员之一。他有着20多年的c++应用经验，涉及的应用领域包括编译器设计、安全交易、电子
-
LABVIEW入门与提该范例教程
LABVIEW入门与提该范例教程 内容简介 本书详细介绍了使用LabVIEW进行虚拟仪器开发的方法。为了帮助读者快速轻松地进入LabVIEW编程世界，本书的编写...
-
形式感+
《形式感+》内容简介：网页设计师从早年的综合性工作中分化出来，形成了相对独立的专业岗位，网页设计也不再是单纯的软件应用，它衍
-
张德丰《MATLAB神经网络编程》
《MATLAB神经网络编程》结合神经网络的概念、理论和应用，以MATLAB为平台，系统地介绍了神经网络工具箱中的前向型神经网络、局部
-
UML软件建模技术
《UML软件建模技术》内容简介：本书以实用、够用为原则，介绍了软件建模技术的基本概念。全书内容由浅入深，逐步展开，并配有大量的
-
鲁迅自编文集：华盖集续编
《鲁迅自编文集：华盖集续编》内容简介：本书是鲁迅的一部杂文集，收录了鲁迅在1926年间所写的杂文三十二篇。包括《杂论管闲事·做
-
《国际交互设计基础教程》书籍《国际交互设计基础教程》
本书全面介绍了交互设计的基本理论，从界面设计、交互原理到用户体验，囊括了所有专业知识点，并通过列举大量具有开创性的交互设
-
DEPHI6培训教程
DEPHI6培训教程 内容简介 本书属于《开发专家之Delphi》系列。本书从对象PASCAL语言的语法开始，逐步讲述Windows编程的基本知识，并详细介绍了...
-
IT服务连续性实现指南
IT服务连续性实现指南 本书特色 本书是一种系统地、全面地阐述it服务连续性知识体系的专著，旨在为社会培养it服务连续性领域的人才，为数据中心开展it服务连续性...
