前言

为什么写这样一本书

作为一名程序员，写书也好，写博客也罢，其实都和写开源程序的性质是一样的，都是想要把自己的知识分享出去。分享是一件非常有成就感同时也是很快乐的事情，因为我们在此过程中会有很多新的想法，会迫不及待地想去实现，也会有很多人来和我们进行交流，探讨其他的一些可能性。最重要的是，对于做分享的人而言，做好分享很难！首先，分享者要对自己讲解的技术有足够的了解，不仅仅是了解如何用它，还要了解它的过去和未来；其次，分享者要能够娓娓道来，要站在受众的立场上考虑他怎样才能听懂，他可能会有哪些疑惑；最后，分享者有责任确保自己分享的知识的准确性和正确性，分享内容的质量同时也折射了分享者的技术水平，这也是迫使分享者进步的一个动力。

响应式技术，乃至前端的技术，发展是非常迅速的，现在能够使用或者可预见的响应式技术，在我看来是非常有意思和振奋人心的。但是，因为一些国内客观条件的限制（公司环境、从业者认知、用户行为等），响应式技术的发展与国外的发展水平有一定的差距。目前能找到的大部分与响应式设计相关的书基本都是从国外引进的，而这些原著一般是几年前出版的，因此这些书传授的知识现在看来显得有些保守和落后（当然终究有一天这本书的内容也会落伍和被淘汰，只是时间的问题罢了）。我想说，即使我们没有机会将大部分技术应用于实战，也应该通过一种渠道了解它究竟发展到何种程度了，至少在将来某一天需要时能够知道从哪里开始。

给页面做性能优化也是我这几年的工作内容之一。我阅读了很多资料，也做过很多的实践和尝试，踩过坑，也总结出一些经验，所以想把其中的一些宝贵经验分享出来。当然，这些经验不仅仅来源于我自己，还有来自工作中一起奋斗过的同事们，感谢他们。

我也是一个通过阅读来学习新技术的人，我会订阅一些技术博客，也会翻阅一些原版书籍。我更欣赏国外技术人员撰写的文章，因为他们讲解技术的时候总能做到循循善诱，有问题的起因，原有方案的不足，现有解决方案如何，以及在现有方案上又有谁做了哪些创新，现有方案仍然存在的不足，最后再提出一些开放性的问题，而不仅仅是给自己看的学习日记，或者把API文档更通俗地翻译一遍。

技术不是什么高深莫测的东西，一个看似复杂的解决方案拆解之后其实只是一些解决问题手段的叠加。因此，我一直希望在我给其他人分享技术时能有机会采用上面所说化繁为简的方式循序渐进。这本书就是这个理念的最好实践。

技术概述

对于大多数国内开发者而言，响应式是一个即熟悉又陌生的词语。熟悉是因为它一直都在以各种方式影响着我们，陌生是有一部分人没有用过它。事实上，响应式技术已经是较为成熟的技术了。它有稳定的API作为支撑，有前人总结出的最佳实践作为开发指导，并且浏览器日趋完善的支持也保证了绝大多数用户都能无障碍访问，尽管可能大部分用户的浏览器环境或者我们的工作场景因为历史原因不允许我们自如地使用。

响应式设计的概念与HTML5类似，不是单指某一技术而是代指一些技术的集合。狭义上来说，媒体查询和响应式图片算是响应式设计的核心技能，但广义上看，任何能够让页面适配移动设备的技术都包含在内，甚至脚本和后端。当然，以本书的篇幅不可能把这一切都事无巨细地娓娓道来。响应式技术也像这个行业一样，始终不断地在更新迭代。本书的内容也只能涵盖现有技术的冰山一角。

内容安排

第1章详细介绍本书的写作方向以及写作思想。这一章解释了许多的疑问：为什么需要响应式，为什么性能如此重要，究竟什么是响应式，以及在学习的过程中如何付诸实践。通过阅读这一章内容，读者会对本书的组织结构和选择题材的原由有所了解。

第2章并没有开始编码，而是了解在响应式开发中需要解决的问题，这些问题有助于理解接下来本书介绍的众多技术的意义，也从技术上区分了桌面前端开发与移动前端开发的差异，所以第2章也可以看作是第1章的延伸。

第3章与第4章可以作为一体。在这两章中，完成了一个拥有响应式基本布局的页面。在第3章中我们为布局做了一些准备工作，使用传统的前端技术搭建了一个简易的版本，为第4章埋下伏笔。第4章基于第3章完成的传统布局，逐个解决在移动端可能遇到的问题，通过引入媒体查询、伸缩布局、相对单位等，正式将布局“响应式化”。

第5章专注处理页面上的图片。图片虽然能够提高页面的吸引力，但它带来的副作用也不容小觑。在这一章中我们会尝试针对不同的屏幕和设备加载图片，甚至移除图片。在条件有限的情况下，我们也会尝试优化图片。

第6章和第7章介绍的是页面优化，第7章可视为第6章的进阶。第6章将帮助读者树立起对“性能”这个词的正确认识。我们将“性能”转化为实际数值从不同的维度进行衡量和追踪，同时通过一段常规代码初步了解脚本的一些性能瓶颈。在第7章中我们将会继续尝试一些其他的优化思路，如避免脚本、选择性加载甚至求助于后端，最后总结性能优化思路。

第8章主要介绍项目的维护问题。在这一章中读者将会了解如何简化上线和开发流程，降低工程的维护成本。

本书特点

实战是本书的最大特点。整本书的内容由一个页面线索串起，也就意味着无论是学习动机还是要学习的技术，都从实际需求出发。同时本书还注重响应式与之前传统技术的对比，尽可能做到承上启下，便于大家理解。实战也意味着我们要考虑页面上线后可能存在的缺陷，如需要向下兼容、做线上优化等。

同时我们也正视了项目中的工程问题，借助于工具优化发布流程、降低维护成本等。

总而言之，希望读者在阅读完本书之后，可以对Web响应式设计有一个较为明确的了解，学到很多实用的知识，而不是在遇到相同的问题后只是觉得似曾相识而无从下手。