什么是响应式

2014-09-25 点击:5214 次

什么是响应式?

通俗来讲,响应式就是同一个网站,会根据用户的设备不同来呈现不同的布局;

比如用户是电脑浏览,那么就显示普通的电脑站;用手机浏览,就显示像定制的手机站;用平板浏览,就显示平板最佳效果;

为啥是响应式?

移动互联网时代,设备在不断的翻新花样,前些年上网无非就是电脑,而现在已经是手机的天下了,穿戴设备也不断涌现,所以为了不用为每种设备做一套网站,就有了响应式网站的诞生。


国内现状

虽然响应式web设计在国外从2011年以来已经发展的如火如荼,80%新建立的网站都采用了响应式布局,但是在国内现状堪忧,原因如下:

1、大多数国内客户对新技术不够重视、特别是传统行业;

2、网络公司问题,有些建站公司为了追求利益最大化,是不会告诉客户这种一站多用的解决方案的,比方说,客户要做网站,那么销售就会告诉客户,做一个PC站,一个手机站、一个微网站,这样下来要收三笔费用,他们是不会告诉客户其实,一个响应式的网站,就可以实现这三种需求了,费用成本可能只是前一种方案的三分之一;

3、还是网络公司问题,公司一味的只追求赶项目进度、多做项目,却忽视了技术人员的学习和提升,导致大多数建站公司的技术人员不会响应式建站,所以也就没法给客户提供更好的解决方案。科技是不断进步的,特别是互联网时代,每个人都是需要及时充电的。但是国内大型的网络公司还是很给力的,像百度、腾讯、淘宝、京东等,他们的前端工程师也早早用上了响应式设计在开展工作了

我们的案例

如果您看完整篇文章还不知道什么是响应式设计,那么请拿起您的手机、Ipad、和鼠标,分别在手机、Ipad、和电脑上体验下我们给客户做的响应式网站:

1、 www.doyobon.com

2、www.wxmfm.com

3、www.hndongmao.com

4、www.jiuniukeji.com




概念


响应式网页设计最初是由美国前端工程师 Ethan Marcotte 于2011年提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先。



背景

PC互联网加速向移动端迁移:2012年12月底我国网民规模达到5.64亿,互联网普及率为42.1%,手机用户占网民总数的74.5%。预计到2015年,移动互联网的数据流量将超越PC端的流量。


移动端入口:当用户希望通过手机来完成PC页的操作时,常见的是商家的运营微博,期文案足够吸引用户点击链接参加活动,如果该活动页没做响应式处理:页面体积大、请求多、体验差、兼容性差,层层阻碍最终导致用户放弃参加。



优势

开发成本低,门槛低


   Native APP:Objective-C or Java – 学习成本高

   Hybrid APP: 外壳+Web APP,需安装。

   响应式Web APP:HTML5+JS+CSS – 门槛低,极易上手,迭代快


跨平台和终端且不需要分配子域


虽然可通过监测用户UA来判断用户终端后做跳转,但它还是分配了多个域,而响应式无需监测用户UA没有域的切换,只需根据终端类型来适配不同的功能模块与表现样式,它是跨平台和终端的,1页面适配多终端。



响应式布局

如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape),怎样才能做到让一种设计方案满足所有情况?


那么我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应,如以下页面中各模块在不同尺寸下的位置:

响应式