响应式设计“让人们忘记设备的尺寸“

在互联网大潮的背景下， PC端加速向移动端迁移：

2012年 12月底，我国网民规模达到 5.64亿，互联网普及率为 42.1%，其中手机用户占网民总数的 74.5%。2014年，智能手机全球出货量达 12.86亿部，同比增长 28.0%。截至 2015年 1月，全球接入互联网的移动设备总数超过 70亿台，几乎平均全球人手一台。

作为最主要的移动终端设备，智能手机仍然保持高速增长，皮尤研究中心（Pew Research Center）近日对调研公司 comScore今年 1月份的流量数据进行了分析，评出了美国最受欢迎的 50大新闻网站。

这些数据显示，在这 50大新闻源中，大部分网站的移动流量已超越 PC流量。

随着越来越多的智能移动设备加入到互联网中来，移动互联网不再是独立的小网络了，而是成为 Internet的重要组成部分。各种移动设备的发展导致每种移动设备都希望拥有适合自身的网页。但是 Web设计和开发几乎无法追赶上设备与分辨率的更新，但是如果不能满足各种设备下用户的使用，就会流失掉用户群，这可谓是一个巨大的挑战。

2010年 5月，伊桑 •马科特（ Ethan Marcotte）在 A List Apart写了一篇开创性的文章，题为 Responsive Web Design，文中援引了响应式建筑设计的概念— —响应式架构（ responsive architecture），并提出：物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构，还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产“智能玻璃”：当室内人数达到一定阈值时，这种玻璃可以自动变为不透明，确保隐私。

如果将这个思路延伸到 Web设计领域，我们就得到了一个全新的概念——响应式 Web设计。

我们何必要为每个设备各自打造一套设计和开发方案？和响应式建筑相似， Web设计同样应该做到根据不同设备环境自动响应及调整。马科特利用三种已有的工具：流动布局、媒体查询和弹性图片创建了一个在不同分辨率屏幕下都能漂亮展示的网站。

响应式设计的核心正是使用百分比布局创建流动的弹性界面，使用媒体查询来限制元素的变动范围。响应式 Web设计的理念是：页面的设计与开发应根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。无论用户正在使用笔记本还是 iPad，页面都应该能够自动切换分辨率、图片尺寸及相关脚本的功能等，以适应不同设备。换句话说，页面应该有能力自动响应用户的设备环境，响应式网页设计就是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这样，我们就不必为不断到来的新设备做专门的版本设计和开发了。我们可以将不同联网设备上众多的体验，当作是同一网站体验的不同侧面来对待，而不要为每种设备进行单独剪裁而使得设计彼此断开，这才是我们前进的方向。

随着智能终端的普及，响应式网页设计被许多网站广泛使用，而且其优势和趋势均已经被普遍认可。

• 开发、运营成本低：相同的页面针对分辨率的不同、设备环境的不同进行了一些不同的响应式设计，所以在开发维护和运营上，相对同时开发多个版本的成本会降低。
• 兼容性好：移动设备的尺寸参差不齐，版本定制通常只适用于固定规格的设备，如果新的设备分辨率变化较大，通常不能兼容，若要开发新的版本，则需要时间，但是响应式设计可以提前预防这个问题。
• 方便改动：响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响。

在 Matthew Carver的著作 《The Responsive Web》一书中，作者以一种易于接受的方式，为读者介绍了现代化的 Web设计，以及响应式设计的重要性。

本书共分为 3个部分。

第 1部分简明扼要地介绍了响应式设计是什么、它为什么会出现，以及现代化 Web浏览器中的哪些特性促成了响应式 Web设计的出现。这部分内容也谈到了“移动优先”这一概念，使用这种概念进行网站设计时，首先按照某个移动设备的断点进行设计，随后再转而设计它的桌面版本。

第 2部分开始介绍如何设计响应式 Web。Carver首先讲解了一些如何为客户展示设计思想的技巧，而不是直接跳到代码的编写部分。他以导航的设计作为入口，介绍了设计模式的使用，以及如何创建响应式页面的思想。接下来的部分涵盖了如何进行实际的响应式设计的某些基本原理，以及用以展现信息的某些现代技术，例如 Web排版。

第3部分介绍了一些高级技术，对于因各种浏览器的不同行为所造成的问题提供了有效的解决方案。在本书的结尾部分，作者对于设计的测试，以及如何进行性能优化方面提供了一些实际建议。

响应式设计在 2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新，各种 Web的响应式设计也获得了越来越多的关注。比如，新的设备不断被创造出来（iPad Mini、iPad Pro），另外 iOS 9新增的 Split View也让页面的展示尺寸有了更多的可能 性，这让以前的设计想法土崩瓦解。“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，响应式设计归根结底不是一种技术，而是一种设计思维方式，即刻起，开始拥抱响应式 Web的设计开发吧。