在计划中常常遇到这几个成绩：

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

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

3.很多人其实不是在全屏的环境下阅读咱们的页面，假如让页面跟着阅读器宽度转变而响应的调剂会不会比较好？

有无方法能有用办理这些成绩呢？

响应式Web计划（Responsive Web design）的理念是页面的计划与开辟该当依据装备环境（屏幕尺寸、屏幕定向、体系平台等）和用户行动（转变窗口巨细等）停止响应的响应和调剂。详细的理论方法由多方面构成，包含弹性网格和布局、图片、CSS media query的应用等。不管用户正在应用pc、平板电脑，或许手机，不管是全屏表现还长短全屏的环境，不管屏幕是横向照样竖向，页面都应当可以或许主动切换分辨率、图片尺寸及相干剧本功效等，以顺应分歧装备。

响应式web计划对交互计划和前端完成提出了更高的请求，需要斟酌清晰分歧分辨率下页面的布局变更、内容的缩放等。

响应式Web计划的上风：

1.开辟、保护、经营本钱上风：页面只有一个，只是针对分歧的分辨率、分歧的装备环境停止了一些分歧的计划，以是在开辟、保护和经营上，绝对多个版本，能勤俭本钱。

2.兼容性上风：挪动装备新的尺寸层见叠出，定制的版本平日只适用于某些规格的装备，假如新的装备分辨率变更较大，则每每不克不及兼容，而开辟新的版本需要光阴，这段光阴内的拜访就是个成绩，然则响应式Web计划可以或许提早防备这个成绩。

操纵机动：响应式计划是针对页面的，可以或许只对需要的页面停止篡改，其余页面不受影响。

实例展现

当阅读器宽度变小时，阁下两栏的宽度都有减少，右边的banner图片和视频也响应减少，右边的头像列表由一排4个变成一排两个。

当阅读器宽度进一步变小后，页面由两栏布局变成一栏布局，部门内容的尺寸进一步减少，搜刮地区也从导航里挪到了导航外。

响应式页面的计划流程

第一步：肯定需要兼容的装备范例、屏幕尺寸

经由进程用户研讨，懂得用户应用的装备散布环境，肯定需要兼容的装备范例、屏幕尺寸。

装备范例：包含挪动装备（手机、平板）和pc。对付挪动装备，计划和完成的时刻留意增长手势的功效。

屏幕尺寸：包含各类手机屏幕的尺寸（包含横向和竖向）、各类平板的尺寸（包含横向和竖向）、通俗电脑屏幕和宽屏。

第二步：制造线框原型

针对肯定上去的几个尺寸分离制造分歧的线框原型，需要斟酌清晰分歧尺寸下，页面的布局若何变更，内容尺寸若何缩放，功效、内容的删减，乃至针对特别的环境作特别化的计划等。这个进程需要计划师和前端开辟职员坚持亲密的相同。

第三步：测试线框原型

将图片导入到响应的装备停止一些简略的测试，可赞助咱们及早发明可拜访性、可读性等方面存在的成绩。

第四步：视觉计划

留意，挪动装备的屏幕像素密度与传统电脑屏幕不一样，在计划的时刻需要包管内容笔墨的可读性、控件可点击地区的面积等。

第五步：前端完成

与传统的web开辟比拟，响应式计划的页面因为页面布局、内容尺寸发生了变更，以是终极的产出更有可能与计划稿收支较大，需要前端开辟职员和计划师多相同。