响应式和自适应的区别

一、概念

1、响应式布局

响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。换句话说就是一个网站能够兼容多个终端，而不是为了每一个终端做一个特定的版本。

2、自适应式布局

自适应布局就是指能忘了使网页自适应的显示在不同大小终端设备上的新网页设计方式及技术，它需要开发多套界面来适应不同的终端。

二、响应式布局与自适应布局的区别

1、自适应布局：通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；

响应式布局：通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。

2、自适应布局：需要开发多套界面，对页面做的屏幕适配是在一定范围：比如pc端一般要大于1024像素，手机端要小于768像素。

响应式布局：只需要开发一套界面就可以了，是一套页面全部适应。

3、自适应布局：如果屏幕太小会发生内容过于拥挤。

响应式布局：可以自动识别屏幕宽度并做出相应调整的网页设计。

三、响应式布局与自适应布局的优缺点

1、优点对比

（1）自适应网站：可以独立设计，做任何自己想要的风格，还可以做到数据库同步，设计方案灵活，可独立优化符合搜索引擎的规则。

响应式网站：更加方便浏览，能够增加访客的体验度，无需再单独设计制作手机站，PC站即是手机站，对于优化来讲，权重不分散，更加符合搜索引擎的规则。

2、缺点对比

（2）自适应网站：手机站有时无法做到与PC站内容完全一致，且工作量大，自适应手机站往往使用不同的子域名或目录跳转，对于优化来讲权重分散，访客浏览体验仍有缺陷。

响应式网：设计往往风格有些局限，对于复杂的框架结构难以实现。

四、如何选择使用自适应布局还是响应式布局

1、选择自适应网站：主要因为自己在建设手机站之前已经有了PC站，PC站不能做到小屏幕设备适中浏览，又不能进行大改版影响网站优化，因此建设自适应的手机站跳转来实现手机、ipad等符合浏览，手机站数据库一般为同步。

2、选择响应式网站：往往是建设新站时设计，之前无PC站或手机，不需要顾及网站优化及数据同步，可设计为响应式网站，响应式网站更加符合访客浏览，增加网站体验度，也更符合网站优化工作。

总之，响应式布局还是要比自适应布局要好一点，但是自适应布局更加贴切实际，因为你只需要考虑几种状态就可以了而不是像响应式布局需要考虑非常多状态。所以的说无论哪种设计都有它们各自的特点，我们要根据项目的需求来选择适合的布局方式。