前言

最近项目忙，忙成狗了，一直加班加班加班，人都要废了~

记得前段时间写了个seo网站的概念，因为之前一直被这玩意坑，而且坑怕了~

这不，最近领导说，这个网站是自适应的，不是响应式的，要改！（当初立项的时候怎么就不提这个。。）

当时懵逼了，什么叫响应式？（请原谅前端小白的我）

自适应能理解，简单描述，让同一张网页自动适应不同大小的屏幕，根据屏幕宽度，自动调整布局~

但是响应式又是什么鬼？

一张图

看了很久，感觉一张图能看懂区别：

基础概念

维基百科：

百度百科：

从维基百科看，响应式跟自适应是一样的，没有单独区分，都是RWD；

但是在百度百科这里，响应式是RWD，自适应是AWD，但是没看出两者有什么区别；

尽管如何，但是结合维基百科跟百度百科，对于响应式的定义基本能认为：

响应式网页设计就是一个网站能够兼容多个终端复制代码

而关于自适应的定义是：

自适应布局只专注实现移动端的布局，旨在实现所有移动端设备的实现效果完全一样复制代码

由这两个概念，可以得出一个情况：

自适应效果是响应式效果的一个子集复制代码

事实上，的确如此;

自适应设计主要是要设定针对不同分辨率的宽度，用@media来查询屏幕宽度，但这不就等于说响应式就不能设定固定宽度，响应式就是靠一个css在任何屏幕分辨率下都可以保持同样的界面；

RWD&AWD：

responsive web design：相同一套html/css应用在不同终端，使大小屏幕都能有较好体验

- fluid grid 百分比宽度布局

- media query css响应窗口宽度等条件实现不同样式

adaptive web design：通过服务端脚本实现不同终端输出不同的html/css/js，在保持大屏体验完美的基础上进一步提升移动端的加载速度/体验流畅等性能。

响应式设计与自适应布局的含义

1、响应式设计简单来说是一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本;

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

可以理解为不同大小的设备上呈现同样的页面，让同一个页面适应不同大小屏幕，根据屏幕的大小，自动调整布局。

响应式设计：

两者之间的优势&弊端

1、响应式网页设计优势：流体网格的网站适合响应式网页设计。

1）灵活性强，可以适应不同分辨率的设备

2）方便快捷的解决多设备显示适应问题 3）省去了很多的控件，同时也省去了不少建立和维护的功夫

2、自适应网页设计优势：固定断点的网站适合自适应网页设计。

1）实施起来代价更低，测试更容易

2）自适应布局可以让设计更加可控，因为它只需要考虑几种状态就可以了

3、自适应网站和响应式网站各自的弊端

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

响应式网设计往往风格有些局限，对于复杂的框架结构难以实现，制作流程复杂，代码兼容性要求较高。

开发难度比较

自适应网站开发起来比较既复杂（不同屏幕的适配控制）又简单（独立于PC端），但是容易维护与调试（只有移动端的处理事件）。

响应式网站开发起来比较既简单（只需通过媒体查询来调整）又复杂（与PC端网页元素耦合度大），但是不容易调试与维护（绑定了移动端与手机端的处理事件）。

页面性能比较

自适应网站只有移动端的布局与样式（内容少），下载到浏览器立刻显示，所以性能快。

响应式网站不仅有移动端的布局与样式，还有PC的布局与样式（内容多），下载到浏览器之后进行网页布局调整再显示，所以性能慢。

PS：响应式网站也有提高性能的方法，就是针对屏幕加载不同的媒体查询样式，选择性加载资源。但是性能依然不如自适应网站。

用户体验比较

响应式网站保证PC端与移动端的一致性，流式布局;

自适应网站保证移动端更友好的体验。

SEO比较

自适应网站不容易聚集网站权重，但可以通过重定向进行聚集权重。

响应式网站容易聚集网站权重，容易把移动端的权重与PC端的权重叠加，提高网站排名。

PS:这种做法是电脑端与移动端使用单独的网址。

小结

一路看下来，算是对响应式跟自适应有了大致了解，因此想总结下：

响应式和自适应最为关键的区别

响应式就相当于液体，它可以自动适应不同尺寸的屏幕，无论你的设备尺寸多么奇葩。

响应式使用CSS media queries的方法，根据目标设备自动改变风格如显示类型,宽度、高度等，这能很好解决不同屏幕尺寸的显示问题。

而自适应设计是基于断点使用静态布局，一旦页面被加载就无法再进行自动适应，自适应会自动检测屏幕的大小来加载适当的工作布局，也就是说，当你要采用自适应设计网站时，你得一个一个设计常见的屏幕布局;

@media

响应式针对的是不同分辨率设备而进行的适配式设计，以利用@media规则为主要手段，

而自适应则忽略@media以比例布局为主，目的是适应不同的浏览器窗口大小。

其他

推荐开发自适应网站，追求性能与用户体验。（大多数的互联网公司都是web PC端与移动端分离的）

响应式网站不适合开发一些比较复杂的网站。（涉及一些动画交互效果，页面元素过多）

建议开发一套响应式电脑网站（过渡到平板端，不过渡到手机端）和开发一套响应式手机端网站（过渡到平板端以下的尺寸，不过渡到平板端）

简单粗暴的理解就是@media那样~

最后附上一个测试响应式的网址，支持跨屏，取需：

http://www.kuapingce.com/

谢谢大家~