一张图看懂响应式(Responsive design)和自适应技术(Adaptive design)的区别

发布日期:2016-12-14
浏览次数:113
  
最近有人问客服,啥叫响应式,啥叫自适应,有区别吗?你们起飞页是响应式还是自适应的。
 
undefined
 
于是开始搜索,马上找到答案,一张图看懂区别
 
undefined
 
响应式(RWD) = 所有设备的代码是一样的
自适应(AWD)= 不同设备的代码是不一样的
 
那起飞页是响应式还是自适应呢?这个。。。严格的说,起飞页是自适应的,因为我们针对不同的设备进行了优化和加速。但是不同设备上的代码,又竟然是90%一致的。我们只能说,起飞页九成是响应式,一成是自适应,是这两种技术的完美结合。
 
以下是小编无聊整理的资料,敢于怀疑并有耐心的朋友可以继续阅读。

 

什么是响应式(RWD)

Ethan M. 的文章最早提出 RWD 的概念,现在公认为RWD的起源。他提出的 RWD 是采用 CSS 的 media query 技术,配合流体布局( fluid grids )和同样可以自适应的图片/视频等资源素材。说人话的话,就是把一行分为12个格子,PC上显示12个一行,而手机上显示2个或者1个一行。所以一般响应式设计都是先画格子,再放内容。和直接上来就绝对定位的不一样。以上所说的各种,在技术上都是通过 HTML 和 CSS 就能完成的,当然偶尔也会用到一点点JS。但是只要用的不多就好。一般来说,RWD 倾向于只改变元素的外观布局,而不大幅度改变内容。 Jeffrey Z. 总结非常好,把 RWD 定义为一切能用来为各种分辨率和设备性能优化视觉体验的技术吧。(其实等于没总结,人家本来就是这个意思么)简单的概括,服务器不知道来访的设备是什么,所有的设备都是用的同一套逻辑。纯正的RWD非常适合CDN,这个可不是盖的。
 

什么是自适应(AWD)

Adaptive Design 是 Aaron G. 的一本技术书的标题,时间要比RWD晚一些。他认为 AWD 在包括 RWD 的 CSS media query 技术以外, AWD 有可能会针对移动端用户减去内容,减去功能。AWD 可以在服务器端就进行优化,把优化过的内容送到终端上。意思就是,服务器知道用户是从手机上访问的,所以就发送手机上专用的资源给手机,这样打开会更快些。AWD其实是CDN不友好的,因为CDN不会识别访问设备哦,至少目前还没有一个支持。
 
 

杂谈线性增强

AWD 通常会牵扯到另外一个词:线性增强(progressive enhancement)。线性增强的意思,就是随着屏幕的大小的改变,功能会一点一点增强。Google就是线性增强技术的布道者和殉道者。为啥说殉道者呢?难道说线性增强没有用了么?你只要闭着眼睛想想,用户在PC上用过一个功能,但是在手机上怎么都找不到,他能开心不。他能不吐槽么,十万人的吐槽,你受得了吗?所以,google成为了第一个烈士。腾讯就很聪明,QQMail从一开始就说咱们是线性增强的,但是所有的功能只是做了合理的隐藏。手机上和PC上的功能完全是一致的。对于这种光说不练,Google就只能呵呵了~~
 
 

登录后即可发表评论,立即登录.