经久不衰的响应式

概念起源响应式设计是由著名网页设计师EthanMarcotte在2010年5月提出的设计概念，为什么一定要...



概念起源

响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念，

为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。

Ethan Marcotte证明了一种在多种设备上都能提供卓越体验的方法的存在，而且这一方法不会忽视不同设备的差异，也不会强调设计师的控制权，而是选择了顺其自然并拥抱Web的灵活性。



响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句说，页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

框架结构

流动布局：原特指以百分比为度量单位的布局技术实现方式。这里就不对如流动布局、弹性布局、流体栅格等各种概念做一一说明。笔者就此统为一个大的概念：在响应式设计的布局中，不再以像素（px）作为唯一单位，而是采用百分比或者混合百分比、像素为单位，设计出更具灵活性的布局方式。



媒介查询：媒介查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询，可以获取到设备及设备的特性，并给出求同存异的方案，从而解决之前在单纯的布局设计中遗留的问题。

弹性图片：伴随布局的弹性，图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。个人认为弹性图片是Ethan Marcotte提出设计产品时提出的概念，我们在后续的研究中可以以图片为典型，扩大研究范围：除了图片，还应该包括图标、图表、视频等信息内容的响应方式研究。

优势有不足

在Web设计和开发领域，我们很快就会发现，要跟上新产品出现的速度，是很难做到的。对于很多站点来说，根本不可能为每一个有着新分辨率的新产品设计一个移动端版本。那么，我们真的是鱼和熊掌不可兼得，必须舍弃用某种设备的用户换来使用另外一种设备的用户吗？或者还有新的方法？



虽然响应式站点并不能算是一种纯粹的移动化解决方案，但是，在某些情况下，这种方式是非常值得考虑的。或许大家之前会注意到，有很多知名网站都推出了iPhone或针对智能手机的专门网站，比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.net的移动网站。那么问题就来了——我们要为每一个设备做一个单独的网站吗？来让网站在每个设备中得到相应的视觉风格和操作体验？这样势必就要增加很多的工作量，而且很多还是重复的。

模式架构

个人还是倾向内容优先的方式，这是真正符合响应式设计核心策略的模式，也是对未来友好的方式。 从过去基本上是基于pc的几个尺寸，选择最佳的标准尺寸去设计页面；到现在移动设备已经玲琅满目，同时电视、穿戴设备也慢慢开始起来，已经不再有固定的尺寸；未来，将是更加无法预知的设备环境；那么什么才是王道呢？——就是内容本身！ 变化总是来得快且狠，我们要做的就是抓住那根可以贯通全局的线！



固定布局：以像素作为页面的基本单位，不管设备屏幕及浏览器宽度，只设计一套尺寸；

可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同宽度的布局。通过设别的屏幕尺寸或浏览器宽度，选择最合适的那套宽度布局；

弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；



混合布局：同弹性布局类似，可以适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面单位。



布局响应 对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有两种方式：桌面优先（从桌面端开始向下设计）；移动优先（从移动端向上设计）； 无论基于那种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称之为断点）， 我们通过JS获取设备的屏幕宽度，来改变网页的布局，这一过程我们可以称之为布局响应屏幕。趋势展望

响应式图标并不就意味着屏幕尺寸对图标来说不是那么重要了，因为它能自动调是说图标大小会随屏幕尺寸的变动而改变，而是意味着图标会根据自己所处何种设备来改变自身大小。这节，它可以变大变小——同一时间，同一屏幕。图标的设计上的差别不会太明显，一般都是细节问题。



响应式图标推动了图标设计的发展，让用户得到了更好的体验，操作性更好，视觉效果更佳。

    关注 NetEase电商设计中心