什么是响应式界面
根据维基百科及其参考文献，理论上，响应式界面能够适应不同的设备。描述响应式界面最著名的一句话就是“Content is like water”，翻译成中文便是“如果将屏幕看作容器，那么内容就像水一样”。
为什么要设计响应式界面
为何按老办法为主流设计特殊版本呢？为什么要费神地尝试统一所有设备呢？
1. 即便是PC或Mac用户，调查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知（http://www.456bereastreet.com/archive/200704/poll_results_504_of_respondents_maximise_windows/）；
2. 台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失；
3. 屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别。
4. 鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。
响应式界面的四个层次
1、同一页面在不同大小和比例上看起来都应该是舒适的；
2、同一页面在不同分辨率上看起来都应该是合理的；
4、同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；
5、同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。
设计师应该清楚哪些
我用中英文搜了一下，发现网上关于响应式界面的文章几乎都是从前段的角度写的，几乎每篇都至少附带有几段CSS代码。但是作为交互设计师，我在实际设计响应式页面时，却又发现了很多问题。有些东西在我这个会写前段代码的人看来，都要思考很久，可想而知对于没有任何前端基础设计师来说，响应式界面的很多细节应该是不能轻易理解的。加之响应式设计是大势所趋，而国内又明显有一定落后，所以我才动了写这篇文章的念头。
由于本人经验有限，而且很多前段基础并不是在这里寥寥几笔就能说清，所以我在这里也只能画个轮廓，希望能给感兴趣的人提供一些基础的帮助。如果遇到志同道合的人，希望能够抛砖引玉，共同学习探讨。
响应式界面的基本规则
可伸缩的内容区块
可自由排布的内容区块
适应页面尺寸的边距
能够适应比例变化的图片
能够自动隐藏/部分显示的内容
能自动折叠的导航和菜单
放弃使用像素作为尺寸单位
用dp尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求提供的图片应该比预想的更大，才能适应高分辨率的屏幕。否则，就会像我的Photoshop一样出现一下这种情况：
依旧很难避免的问题
即便符合了基本规则，实际设计中还是会有些问题难以避免。
百分比并不好用
刚开始设计响应式界面时，很容易把页面百分比是做解决一切问题的途径，然而根据我的经验，百分比其实很不好用，因为：
1. 百分比很容易让整个页面看起来“软趴趴”的，一切宽度、边距都处在不断的变化中，用起来并不舒服；
2. 文字大小、边框、阴影、圆角等元素并不方便用百分比确定。这样以来，有的东西能根据页面百分比来变化，有些却又不能，混杂起来，能够毁了整个视觉设计。
3. 当页面尺寸变化巨大时（想想只能手表和投影仪），百分比完全不能解决可读性和易用性的问题。
悬停状态可能需要放弃
理想中的响应式页面应该适应任何操作方式，所以鼠标悬停这个在触屏设备不存在的状态，可能要被整个放弃了。考虑到对于鼠标用户来说，悬停反馈依旧很重要，所以悬停效果可以保留，只是不能用悬停状态来展示关键信息。
符合主流设备用户的心理预期
电脑用户期待在页面上看到更加丰富的内容，而手机用户却期待页面能专注于单一的任务。并且手机上网页的布局习惯和电脑上网页的布局习惯也有不同。这点不太好把握，只能多多注意，尽量可能制定出分别符合各方习惯的规则。
未经允许请勿转载
