软件著作权号:2015SR186296 / 2015SR186339
  • 客户服务
自适应网站与响应式网站的区别

相信很多小伙伴对于自适应与响应式的概念还有点模糊,一般自适应这种说法比较少,相对而言,响应式的名声要大一些。目前自适应设计与响应式设计流行,而且经常让人混淆,一开始小编在网站制作建设这一块还是小白的时候,也是这样误以为的。但是在接触过后,才明白自适应网站与响应式网站是有实质上的区别的自适应设计不应与自适应布局混为一谈,它们是完全不一样的概念。接下来让我们来了解一下二者的区别吧!

图1

Responsive design (响应式设计):建立一个网页,通过先进的技术来改变网页的大小以适应不同分辨率的屏幕。

Adaptive design (自适应设计):为不同类别的设备建立不同的网页,检测到设备分辨率大小后调用相应的网页。目前AWD网页主要针对这几种分辨率(320,480,760,960,1200,1600)

在下图中可以看到,响应式网站中网页和屏幕分辨率的关系是一对多的,一套网页适应多个设备。而自适应设计中网页和屏幕分辨率的关系则是一一对应。

图二

响应式布局简而言之就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。在这里大家可以理解为做一个网站就能适应多种设备,而不用在为每个设备做一个特定的版本,在不同的设备上展现的模式也不一样。响应式可以为不同终端的用户提供更舒适的界面和更好的浏览体验。

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小。但是无论怎样,他们主体的内容和布局是没有变的。

不过这边有一点要说自适应的设计不太灵活,它只能在其预先设计好的屏幕上正常显示,如果市面上出现了一个新的尺寸,你可能就要修改你的设计了,或者干脆重设计一个,而响应式网站在这方面更灵活些,自适应的网站会经常需要一些例行公事的维护。响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动

截图

如何选择响应式和自适应

在大多数情况下,响应式网站是个不错的选择。无论终端设备屏幕大小,它都能有很好的实现性能,而且设计的时候也会节约很多时间。一个网站就搞定了多个终端设备。

但是,最终还是要看内容,如果内容太多,页面信息复杂,建议使用自适应的模式,因为这样设计移动端要考虑的会简单一些,而且更容易做适配。如果内容少,当然首选响应式。市面上也有一些典型的例子,比如“淘宝”,因为首页内容太多,所以只能选择自适应的模式,PC端和移动端的内容差别很大。再如“36kr”他们就是典型的响应式,因为信息架构简单。