文章目录[隐藏]
  • 1)概念：
  • 2)实现原理：
  • 3)异同：
  • 4)优缺点：
  • 5)标志：

1)概念：

自适应：自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。

响应式：响应式设计是 Ethan Marcotte 在 2010 年 5 月份提出的一个概念，简而言之，
就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。
这个概念是为解决移动互联网浏览而诞生的。

2)实现原理：

自适应设计实现原理：

是为不同类别的设备建立不同的网页，检测到设备分辨率大小后调用相应的网页。

响应式设计实现原理：

通过判断不同设备的视窗大小,调整相应元素的大小显示和不显示。

3)异同：

自适应网页始终都大致一样只是改变了不同的宽度;一般有有两套方案

响应式网页会随着可是窗体大小的不一样而做出相应的改变;无需做跳转

4)优缺点：

 响应式：

  •  优点：
    面对不同分辨率设备灵活性强
    能够快捷解决多设备显示适应问题
  • 缺点：仅适用布局、信息、框架并不复杂的部门类型网站
    兼容各种设备工作量大，效率低下
    代码累赘，会出现隐藏无用的元素，加载时间加长
    其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
    一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

自适应：

  •  优点：
    对网站的复杂程度兼容性更大
    实施起来代价更低，
    代码更高效
    测试更容易，运营相对更精准(图片可控性更高)
  • 缺点：
    在移动端设计大行其道之下，同一个网站，往往需要为不同的设备开发不同的页面，增加开发成本
    其实这是复杂类型网站设计的一种最优方案，虽然增加了开发运营成本，但是换回了更精准的运营、
    框架扩展度更高，用户加载更迅速，是极其划算的一件事情，这也是自适应设计成为当下主流网站采
    用的布局方式的重要原因之一

5)标志：

     响应式：

  • 同时适配 web+手机
  • 标签导航在视口接近最大手持终端设备视口时改变为经典的抽屉式导航
  • 网站框架布局会根据视口来调整位置

自适应：

  • 大多只是适配单个终端的主流 N 个主流视口(2-3 个)
  • 当视口大小低于设置的最小视口时，界面会出现显示不全，溢出，并出现横向滑动指示器
  • 总体框架不变，横线布局的板块大多会有所减少