网站的风格也是与时俱进的。在满足个人电脑浏览的同时，移动端也适合用户浏览。作为一些企业公司和个人，他们在线营销方面有更严格的需求，不仅符合网站的品牌形象和访问者的体验，而且符合搜索引擎规则、网站优化等。那么自适应移动站和响应式移动站有什么区别呢？

1、响应式网站由来

最开始网站都会被设计成固定宽度的页面，最开始的PC显示器的分辨率种类不多，因为当时电脑本来就少，即使有变化也是 800、900、1050、1200等几种。比如 GitHub的网页就是固定宽度为1020px来定制的。

后来随着显示器越来越多，以及笔记本的普及，这种方式的页面出现了问题。在大屏显示器上整个页面显的特别小，在小屏显示器上网页又出现滚动条导致用户体验极其的差。为了解决在各种不同大小和分辨率的设备上如何正确显示网站的问题，前前后后也出现了好多种方案。

提供不同版本：最开始的解决方法，是为不同的设备提供不同版本的网页。比如一个站点为PC、Mobile、Pad提供三个不同的版本。这样做固然保证了效果，但同时要维护好几个版本比较麻烦，而且网站有多个入口，会大大增加系统架构的复杂度。

自适应：后来人们就开始想能不能"一次设计，普遍适用"，即让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。这就是所谓自适应布局解决方案。

响应式： 采用自适应布局的话，如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚。为了解决这个问题而衍生出来的一种新的布局方式，那就是响应式布局。

2、响应式和自适应的区别

先给出两个具体例子让大家直观感受一下两种的效果：

响应式网站：
https://www.microsoft.com/zh-cn/

自适应网站：http://m.ctrip.com/html5/

响应式和自适应两种布局方式都是为了解决在不同大小和分辨率的设备上正确显示网页的问题。不同的是两种布局方式采取了不同的解决方法而矣。

最开始出现的一种新的布局方式其实是宽度自适应布局。我们平时谈论的自适应布局，大部分时候指的就是宽度自适应布局。 自适应是为了解决如何才能在不同大小和分辨率的设备上呈现同样的网页。在网页内容和布局主体保持基本不变的前提下，让同一张个页面自动适应不同大小和分辨率的设备，根据设备屏幕宽度，自动调整网页内容大小。 如下图所示：

 

自适应布局：网页内容和布局完全一样

从上图可以看出采用自适应布局的话，不管设备屏幕尺寸如何变化，打开同一个页面看到的内容和布局基本上是一样的，不同的只是内容的尺寸。

这样就会引发一个问题，那就是如果设备太小，就算网页能够根据屏幕大小进行适配，但是在太小屏幕显示内容过多会看不清楚，从而极大损害用户体验。

响应式布局正是为了解决这个问题而衍生出来的一种新的布局方式。它可以自动识别屏幕尺寸并做出相应调整的网页设计，页面布局和展示的内容可能会随着屏幕尺寸变化而有所变化。

  一、区别

  响应网站使用不同的设备浏览网站时，网站的样式内容和URL完全相同，PC端和移动端属于同一个网站模板，数据库是完全一致的，并且非常符合搜索引擎的优化规则。

  自适应网站是指使用不同的设备浏览不同的网页、网页内容和布局样式或相似或者完全不同，PC端属于不同的网站模板、数据库内容或相同或独立的，以适应用户的浏览，对于网站优化人员来说更习惯于数据库的同步，使PC端的URL和内容与移动终端的URL和内容逐个对应。

  二、响应式网站和自适应网站优缺点

  响应式网站优点：更方便浏览，可以增加访问者的体验，不需要分别设计和制作移动站，PC站也是一个手机站，对于优化来说权重不分散，更符合搜索引擎的规则。

  响应式网站缺点：设计往往存在一些局限性，由于框架结构复杂、制作过程复杂、代码兼容性要求高。

  自适应网站优点：可以独立设计，做任何你想做的风格，可以实现数据库同步，灵活设计，可以按照搜索引擎的规则独立优化。

  自适应网站缺点：移动端有时与PC站点的内容不完全一致，工作量大，自适应网站经常使用不同的子域名或目录进行跳转，在优化人员眼中会导致权重分散，用户浏览体验仍然存在缺陷。

  三、如何选择

  响应式网站通常是在新建站点时设计的，以前没有PC端或手机时不需要考虑网站优化和数据同步，可以设计为响应式网站，更符合访问者浏览，增加网站体验也符合网站优化工作。

  自适应网站的移动台主要是因为自己在建设移动站点之前已有PC站，PC站不能实现小屏幕设备的适度浏览，也不能进行大的修改影响网站的优化，因此建立自适应的移动站点去进行跳转实现手机的自动浏览，移动站数据库通常是同步的。