在设计中经常遇到这几个问题：

    1.想要网站兼容手机、平板电脑、pc，就得为不同的设备定制不同的版本。

    2.想要网站的某些页面在宽屏显示器下一行显示更多的内容，又得为宽屏定制一个版本。

    3.很多人并不是在全屏的情况下浏览我们的页面，如果让页面随着浏览器宽度改变而相应的调整会不会比较好？

    有没有办法能有效解决这些问题呢？

    响应式Web设计(Responsive Web design)的理念是页面的设计与开发应当根据设备环境(屏幕尺寸、屏幕定向、系统平台等)以及用户行为(改变窗口大小等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用pc、平板电脑，或者手机，无论是全屏显示还是非全屏的情况，无论屏幕是横向还是竖向，页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

     响应式web设计对交互设计和前端实现提出了更高的要求，需要考虑清楚不同分辨率下页面的布局变化、内容的缩放等。

响应式Web设计的优势：

实例展示

     查看线上demo

    当浏览器宽度变小时，左右两栏的宽度都有缩小，左边的banner图片和视频也相应缩小，右边的头像列表由一排4个变为一排两个。

    当浏览器宽度进一步变小后，页面由两栏结构变为一栏结构，部分内容的尺寸进一步缩小，搜索区域也从导航里挪到了导航外。

响应式页面的设计流程

第一步：确定需要兼容的设备类型、屏幕尺寸

    通过用户研究，了解用户使用的设备分布情况，确定需要兼容的设备类型、屏幕尺寸。

    设备类型：包括移动设备(手机、平板)和pc。对于移动设备，设计和实现的时候注意增加手势的功能。

    屏幕尺寸：包括各种手机屏幕的尺寸(包括横向和竖向)、各种平板的尺寸(包括横向和竖向)、普通电脑屏幕和宽屏。

    需要考虑的问题：

第二步：制作线框原型

    针对确定下来的几个尺寸分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面的布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境作特殊化的设计等。这个过程需要设计师和前端开发人员保持密切的沟通。

     图片来源

第三步：测试线框原型

    将图片导入到相应的设备进行一些简单的测试，可帮助我们尽早发现可访问性、可读性等方面存在的问题。

第四步：视觉设计

    注意，移动设备的屏幕像素密度与传统电脑屏幕不一样，在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等。

第五步：前端实现

    与传统的web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。

建议继续学习：

1. 响应式网页设计    (阅读：18486)
2. 异步编程与响应式框架    (阅读：3911)
3. 响应式设计的5个CSS实用技巧    (阅读：3610)
4. 响应式Web设计：50实例例与实践    (阅读：3579)
5. 淘宝响应式WebUI设计实践    (阅读：3046)
6. 响应式Web设计    (阅读：2971)
7. 响应式网页设计    (阅读：2642)
8. iOS界面响应式布局方式对比    (阅读：1546)
9. Web开发中的响应式图片处理    (阅读：1545)
10. 复杂产品的响应式设计【流程篇】    (阅读：1451)