具体描述
想要为平板、手机、笔记本、大屏幕设备，甚至可穿戴设备提供最优的用户体验？那就学习响应式设计吧。这是一本内容特别全面、讲解非常透彻的入门书。特别地，通过这本书不仅能迅速掌握响应式Web设计的基本原理，还能够从头到尾了解响应式设计的工作流程：从项目启动开始，到项目最终上线为止。
只要你的工作与创建、改造或者升级网站有关系，都应该看看这本书。换句话说，不仅是前端开发人员，设计师、产品经理、项目经理，甚至后端开发人员也可以通过本书掌握响应式设计的精髓所在。这本书基于响应式设计的前沿技术和社区经验写成，汇集了前人的智慧和最佳实践。希望读者能够“站在巨人的肩膀上”，把这本书的内容应用到未来的项目中，造福更多用户。
内容策略的制定应先于视觉设计
默认设计应针对最窄屏幕宽度进行
响应式Web设计的关键：HTML元素和CSS属性
基于设备视口宽度，通过媒体查询显示不同的CSS样式
处理图像、文字排版和导航
采用性能优化技术建立更轻量级、更快的网站
作者简介
Clarissa Peterson
用户体验设计师、Web开发人员，响应式网站设计咨询公司Peterson/Kandy（位于蒙特利尔）联合创始人。她经常在开发者会议及研讨会上发表关于响应式设计、移动策略和用户体验方面的演讲。
目录信息
第一部分 响应式设计基础
第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
· · · · · · (收起)
读后感
用户评价
这本书的纸张质量非常好，拿在手里有一种沉甸甸的厚重感，翻页也很流畅。封面设计简洁大气，色彩搭配也很舒服，给人一种专业、严谨的感觉。我是一位UI/UX设计师，对于如何让用户在不同设备上获得一致且优质的体验非常关注。我一直觉得，响应式设计不仅仅是前端工程师的事情，更应该贯穿整个设计流程。这本书从设计师的视角出发，深入浅出地讲解了响应式设计的关键要素，包括网格系统、断点设置、内容适配等。我尤其喜欢书中关于“视觉层级在不同屏幕尺寸下的调整”的讨论，这对于我来说非常有启发性。它让我意识到，响应式设计不仅仅是布局的改变，更是内容呈现方式和信息优先级在不同情境下的动态调整。书中还分享了许多优秀的响应式设计案例，这些案例不仅具有很高的参考价值，更重要的是，它们背后蕴含的设计思考和策略，是我非常渴望学习的。我迫不及待地想将书中的理论和案例与我的实际工作结合，尝试设计出更加符合用户需求、更具适应性的界面。
这本书的装帧真的很有质感，封面上“学习响应式设计”几个字，用一种沉静却又不失力量的字体排印，配合着背后那种渐变过渡、仿佛网页在不同设备间流动变化的图案，瞬间就抓住了我的眼球。我是一名做了几年前端开发的工程师，虽然对响应式设计已经有了一些概念性的了解，也零散地看过一些博客文章和教程，但总感觉像是拼凑起来的，缺乏一个系统性的梳理。这次拿到这本书，我第一时间就是翻阅目录，看着里面条理清晰的章节安排，从基础的媒体查询，到复杂的布局技巧，再到各种设备适配的细节处理，甚至还涉及到性能优化和未来趋势的探讨，我感到一种莫名的踏实。我尤其期待那些关于“断点选择的艺术”以及“移动优先策略的深度解析”的章节，因为这正是我在实际项目中经常会遇到的难点，总觉得自己的实现不够优雅，不够高效。这本书的排版也很舒适，字号适中，行距合理，即使长时间阅读也不会感到疲惫。而且，我注意到书中的代码示例都非常规范，使用了当下流行的CSS特性，这对我来说是巨大的福音，我可以很方便地将这些实践应用到我的工作中去，提升我的开发效率和代码质量。总而言之，这本书给我一种“专业且值得信赖”的感觉，我迫不及待地想深入其中，汲取其中的知识养分。
我是一位经验丰富的前端工程师，工作中经常需要处理各种老旧项目和新项目的适配问题。我发现，很多项目在响应式设计方面存在着各种各样的问题，要么是实现方式过于陈旧，要么是性能方面存在隐患。我一直在寻找一本能够帮助我系统性地梳理响应式设计最佳实践的书籍。《学习响应式设计》这本书给我带来了很多惊喜。它不仅涵盖了响应式设计的核心技术，如媒体查询、Flexbox、Grid等，更重要的是，它深入探讨了如何在实际项目中应用这些技术，以及如何进行性能优化。我尤其欣赏书中关于“断点选择策略”和“CSS优先级管理”的讨论，这些都是我在日常工作中经常会遇到的挑战，而这本书提供的解决方案非常实用且具有指导意义。书中还分享了许多关于不同设备和浏览器兼容性的处理技巧，这对于保证项目质量至关重要。我感觉这本书就像是一位经验丰富的老友，为我指点了迷津，让我能够更高效、更专业地解决响应式设计中的各种难题。
我是一名网页设计师，日常工作需要将创意概念转化为实际的视觉作品。在当前这个多屏幕时代，如何确保我的设计能够在各种设备上都获得最佳的呈现效果，是我一直在思考的问题。 《学习响应式设计》这本书，为我提供了一个非常系统性的解决方案。它不仅仅是关于代码的实现，更重要的是，它深入探讨了响应式设计背后的设计哲学和用户体验考量。我非常欣赏书中关于“视觉层级在不同屏幕尺寸下的调整”的讨论，这对于我来说非常有启发性。它让我意识到，响应式设计不仅仅是布局的改变，更是内容呈现方式和信息优先级在不同情境下的动态调整。书中还分享了许多优秀的响应式设计案例，这些案例不仅具有很高的参考价值，更重要的是，它们背后蕴含的设计思考和策略，是我非常渴望学习的。我迫不及待地想将书中的理论和案例与我的实际工作结合，尝试设计出更加符合用户需求、更具适应性的界面。
我一直对前端技术很感兴趣，尤其是在看到很多网站都能在手机和电脑上显示得很好时，我就被响应式设计深深吸引了。我是一个喜欢钻研细节的人，在学习任何新知识时，我都希望能够从根本上理解它。这本书就满足了我这个需求。它并没有仅仅教我如何去写响应式代码，而是深入浅出地讲解了响应式设计的“道”和“术”。它从响应式设计的历史渊源讲起，解释了为什么我们需要响应式设计，然后才一步步深入到具体的实现技术。我特别喜欢书中对“像素密度”和“视网视口”等概念的详细解释，这些基础知识对于理解不同设备上的显示差异至关重要。书中的插图和图示也非常精美，能够非常直观地帮助我理解复杂的概念。我经常会在阅读的同时，对照书中的示例在自己的电脑上进行实践，这种“边学边练”的方式让我收获颇丰。这本书让我明白，响应式设计不仅仅是代码的堆砌，更是一种对用户体验的尊重和对技术趋势的拥抱。
最近我一直在思考如何提升现有网站的用户体验，特别是针对移动端用户。我的网站虽然在PC端看起来还不错，但在手机上的表现却差强人意，缩放、滑动非常不便。于是我开始寻找能够系统性解决这个问题的方案，机缘巧合之下，我看到了《学习响应式设计》这本书。我非常看重书籍的深度和广度，而这本书在这两方面都做得相当出色。它没有停留在浅尝辄止的介绍，而是深入探讨了响应式设计背后的原理，例如不同设备分辨率的差异、像素密度对视觉效果的影响，以及如何利用媒体查询实现精细化的样式控制。我特别欣赏书中关于“移动优先”设计理念的阐述，这种从用户最核心的需求出发，逐步扩展到更大屏幕的设计思路，与我一直以来在产品设计上的追求不谋而合。书中还专门辟出了章节讲解了响应式图片和字体的使用，这些细节往往是影响用户体验的关键，也是我过去容易忽略的地方。通过阅读这本书，我不仅掌握了实现响应式设计的具体技术，更重要的是，我建立起了一套更完整、更科学的设计和开发流程。我现在非常有信心能够将我的网站改造得更加优秀。
我是一名对新兴技术充满热情的技术爱好者，同时也是一位热衷于学习新事物的学生。在浏览技术社区时，我偶然看到了“学习响应式设计”这本书的介绍，它“让你的网站在任何屏幕上都完美呈现”的承诺，立刻引起了我的兴趣。我一直认为，网页的适应性是未来互联网发展的重要趋势，而响应式设计正是实现这一目标的关键。这本书从最基础的HTML和CSS知识开始，循序渐进地讲解了响应式设计的核心理念和实现方法。我特别喜欢书中对“媒体查询”的详细介绍，以及如何利用它来针对不同的屏幕尺寸应用不同的样式。此外，书中对“弹性盒子（Flexbox）”和“网格布局（CSS Grid）”的深入解析，更是让我对网页布局有了全新的认识，这些强大的工具让复杂布局的实现变得前所未有的简单。书中还穿插了许多真实的案例分析，这些案例不仅展示了响应式设计的魅力，也让我学到了许多实用的技巧和思路。我深信，通过这本书的学习，我能够更好地理解和掌握响应式设计，并将其应用到我的个人项目中，创造出更具吸引力和实用性的网页。
作为一名初学者，我曾经对网页制作感到很迷茫，特别是当我想让我的作品能在手机上也能好看时，更是束手无策。我尝试过很多网上的零散教程，但总感觉不成体系，学到的东西也很零碎。偶然的机会，我发现了《学习响应式设计》这本书，它简直就是为我量身打造的。这本书的语言非常通俗易懂，即使是没有太多基础的我，也能很快理解其中的概念。它从最基础的HTML和CSS讲起，然后一步步地引出响应式设计的概念，并详细讲解了媒体查询、弹性盒子、网格布局等核心技术。书中大量的代码示例都配有详细的解释，让我能够清楚地知道每一行代码的作用。我最喜欢的是书中关于“移动优先”的理念，它让我明白，最好的设计应该是从用户的核心需求出发，而不是被动地去适应设备。通过学习这本书，我不仅掌握了响应式设计的技术，更重要的是，我培养了一种用户至上的设计思维，这对我以后的学习和工作都将受益匪浅。
我是一位刚刚接触前端不久的学生，平时对网页制作充满了好奇。在网上冲浪的时候，偶然看到了“学习响应式设计”这本书的推荐，当时就被它“让你的网站在任何屏幕上都完美呈现”的slogan所吸引。作为一个新手，我最头疼的就是如何让我的作品同时适应电脑、平板和手机等不同尺寸的屏幕。传统的固定宽度布局在小屏幕上简直是灾难，用户体验极差。这本书就像是一盏指路明灯，它从最基本CSS概念入手，循序渐进地讲解了响应式设计的核心思想和实现方法。我尤其喜欢书中对“弹性盒子（Flexbox）”和“网格布局（CSS Grid）”的详细介绍，这些新的布局方式彻底颠覆了我对网页布局的认知，让原本复杂的操作变得简单易懂。书中还穿插了大量的真实案例分析，每一个案例都详细解释了其设计思路和实现细节，我可以通过模仿和实践，快速掌握这些技巧。更重要的是，这本书不仅仅是教我如何“做”，更是让我理解“为什么这样做”。它解释了响应式设计背后的设计哲学和用户体验考量，让我明白这不仅仅是为了技术上的实现，更是为了给用户提供最好的浏览体验。我已经开始尝试将书中的知识应用到我的课程项目里，效果非常显著，老师也给了很高的评价。
我是一位自由职业的前端开发者，客户的需求多种多样，其中越来越多地要求网站在各种设备上都能有良好的表现。我之前也接触过一些响应式设计的零散知识，但总是感觉不够系统，实践起来也有些磕磕绊绊。这本书的出现，恰好填补了我知识体系上的空白。我非常喜欢它循序渐进的讲解方式，从媒体查询的基础语法，到如何灵活运用CSS Grid和Flexbox构建复杂的响应式布局，再到如何优化移动端性能，每一个环节都讲解得非常到位。书中提供的代码示例都是可以直接拿来用的，而且写得非常规范，这对我来说是极大的便利。我尤其看重书中关于“响应式导航”和“响应式表单”的章节，因为这些是用户最常交互的模块，也是最容易出现用户体验问题的部分。通过这本书的学习，我感觉自己对响应式设计的理解更加深刻，思路也更加开阔。我现在更有信心面对客户提出的各种要求，能够为他们提供更专业、更优质的解决方案，同时也为我赢得了更多的业务机会。
技术旧但很详细。拖拖拉拉看完，懂个思路好了。
不能说书写的不好。全是原则啊，理念啊的，实用性不强。适合用来做教科书，但是想做点什么的话，完全用不上！
技术旧但很详细。拖拖拉拉看完，懂个思路好了。
内容偏向基本思想介绍，部分内容不适合天朝国情。毕竟是早期经典，没什么具体技术方面的可操作性的内容。
Web前端技术类书籍，需要一定技术基础
