网站的交互相应模式
源起
2010年5月，伊桑.马科特(Ethan Marcotte)在“A List Apart”写了一篇开创性的文章(题为“Responsive Web Design” )，他运用三种已有的东西：活动规划(Fluid grids)、前言查询(Media queries)和弹性图像(Scalable images)创立了一个在不一样分辨率屏幕下都能漂亮地显现的网站。 Ethan Marcotte力劝规划师们要去运用那些Web特有的特性去进行规划： “咱们能够将不一样联网设备上许多的体会，当作是同一网站体会的不一样旁边面来对待，而不要为每种设备进行独自剪裁而使得规划互相断开，这才是咱们行进的方向。尽管咱们现已能够规划出好的视觉体会，但还要把依据规范的技能也嵌入到咱们的规划中去，这样才干使得咱们的规划不只灵敏，并且还能习气烘托它们的各种前言。” Ethan Marcotte证明了一种在多种设备上都能供给杰出体会的办法的存在，并且这一办法不会忽视不一样设备的区别，也不会着重规划师的控制权，而是挑选了顺从其美并拥抱Web的灵敏性。
这儿简略介绍下上面的提到的三个概念：活动规划(Fluid grids)、前言查询(Media queries)和弹性图像(Scalable images)本来都是指现有的一些技能手段，但在做呼应式规划研讨的进程中，这些概念仍是有更广泛的意义，规划师也应当有所了解：
活动规划
原特指以百分比为度量单位的规划技能完成办法。这儿就不对如活动规划、弹性规划、流体栅格等各种概念做一一阐明。笔者就此统为一个大的概念：在呼应式规划的规划中，不再以像素(px)作为仅有单位，而是选用百分比或许混合百分比、像素为单位，规划出更具灵敏性的规划办法。
前言查询
前言查询能够让你依据在特定环境下查询到的各种特点值——比方设备类型、分辨率、屏幕物理尺度及颜色等——来决议运用啥样的款式。通过运用前言查询，能够获取到设备及设备的特性，并给出求同存异的计划，然后处理之前在单纯的规划规划中留传的疑问。
弹性图像
随同规划的弹性，图像作为信息重要的办法之一也有必要有更灵敏的办法去习气规划的改变。自己认为弹性图像是Ethan Marcotte提出规划商品时提出的概念，咱们在后续的研讨中能够以图像为典型，扩展研讨规模：除了图像，还应当包含图标、图表、视频等信息内容的呼应办法研讨。
盛行
呼应式规划的概念从提出至今，一向不断蔓延分散，并得到各方认可的主要原因：
1、外部环境
快速增长且日趋加重的可联网设备的多元化，让如今已不再有规范的屏幕尺度;
2、自身特征
严厉界说的呼应式通常是指呼应式Web规划，而Web凭借其特有的灵敏性和可塑性，能够习气各种尺度和装备的设备，能够无处不在。
3、内部需求
呼应式规划概念一提出，各大网站及渠道都期望能够选用这秉一应万的形式，能够更灵敏地去适配更多设备，尤其是如今移动设备大爆棚的年代。
当然也并不是一切的状况都理所应带应当选用呼应式规划，那么啥状况下更合适选用呼应式呢?
1、你想节约成本地去习气更多场景
资本都是有限的，但老是期望能运用有限的资本去取得更大的价值。尽管比起开发规划一个一般的网站来说，要打造一个呼应式站点，所需求的人力和时刻资本都会有所增加，但比起为不一样设备别离打造多个版别的成本仍是要低许多;从保护的视点来说，也会轻松许多。
2、你并不清楚要规划开发的全新商品更合适哪个场景
与其通过猜测挑选中心设备再进行别离规划，倒不如先花些心思将网站打造得更具弹性，使其在各种设备中都具有尽可能优异体会。由于在各方面都不知道都状况下，做猜测会加重进程危险，使得成果存在无穷的挑战性。
3、你期望网站能够兼容将来的新设备
新的设备层出不穷，与其被动地进行更新保护，不如自动应万变，变成呼应式。 当然这儿仅仅说更合适，本来自己认为只需项目资本和时刻答应，根本上大多数网站都能够去测验完成呼应式;而关于初次测验呼应式规划的，也能够从“简略阅读型页面”开端。
形式
当前大多网站中挑选变成呼应式的规划形式主要有两种：
1、依据设备
通过干流设备的类型及尺度来断定规划断点(Break point)，规划多套款式，再别离投射到呼应的设备。
2、内容优先
依据内容的可读性、易读性作为断定断点(Break point)的规范，即在对内容进行规划规划的时候，能够无视设备，有内容决议何时需求选用不一样的出现办法。
自己仍是倾向内容优先的办法，这是真实符合呼应式规划中心战略的形式，也是对将来友爱的办法。 从曩昔根本上是依据pc的几个尺度，挑选好的规范尺度去规划页面;到如今移动设备现已玲琅满目，一起电视、穿戴设备也渐渐开端起来，现已不再有固定的尺度;将来，将是愈加无法预知的设备环境;那么啥才是王道呢?——即是内容自身! 改变老是来得快且狠，咱们要做的即是捉住那根能够贯穿大局的线!
在内容优先的战略中，有三点思想形式能够贯穿全部呼应式规划的进程：
1、忘掉设备
由于咱们不知道用户会用啥样的设备来访问网站，因而，咱们有必要尽可能地把一切状况都包含进来;一切的东西(规划、组件等)都能与不一样类型的设备和渠道相兼容。
2、高雅降级
尽管这个概念一开端是技能完成上对新的特性在老的阅读器上无法极好完成时的折中做法，但在此仅想表达在对规划做弹性规划时，内容从宽到窄的改变出现，有必要通过重重挑选，留存中心的内容块。这种形式十分合适对已存在的pc页面商品进行呼应式规划改造。
3、渐进增强
此概念是在Steven在2003年的SXSW活动上提出的。在本质上来说，即是把高雅降级倒过来：先创立一个根本体会，偏重让内容以一种简介的办法来展示;以后，在确保根本体会的前提下，开端着手做有关显现的规划和交互。而在此，也借用来阐明下关于呼应式规划的内容战略中，内容从窄到宽的改变出现中，能够让内容的丰厚度也相应地有所增加。这种形式与移动优先战略是相匹配的。
当然，当前呼应式也是有存在各种争论的，或许你有一个极好的理由不必呼应式页面规划?但我想没人会说，“让咱们脱节呼应式规划吧”，而实际上，不断增加的网站挑选变成呼应式。2014年如此，2015年也仍是会持续，由于这现已不是种趋势，而怡然是种常态了。
将来的路
尽管呼应式规划的优势和趋势已被遍及认可，但当前呼应式规划的形式的普及仍是有许多难题需求突破：
1、呼应式图像
当前弹性图像的做法主要是：缩放、剪裁、分条件加载等完成办法本质上都仅仅一个技巧，仅仅治标不治本地掩盖了疑问，并未真实地完成图像的弹性。
2、跨端的交互
在呼应式规划中，咱们不只需需求思考桌面用户的运用习气，还有必要统筹不一样尺度的手持设备。比方在桌面端无尽高雅的Hover，在移动端却是无比糟糕的体会，怎么“求同存异”，让各端体会均能好，仍是需求持续深化探求的。
3、功能
功能估量是在呼应式开发中大的痛，按条件加载、躲藏或显现啥内容，都会比单一条件判别的代码构造来的繁琐，并影响体会及保护。尤其是移动功能上，更多样的设备具有愈加复杂的运用环境，怎么识别设备，并让设备在不一样环境均能杰出体会，也是一根硬骨头。
4、协作流程
呼应式规划远远不止是一种简略的规划战略，它为Web项目带来的是一整套全新的、完好的办法，还应当包含一种新的、能够非常好地运用这一形式的作业流程。
