JB的测试之旅-网站的响应式与自适应

前言

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

记得前段时间写了个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）方便快捷的解决多设备显示适应问题    3）省去了不少的控件，同时也省去了很多创建和维护的功夫

二、自适应网页设计优点：固定断点的网站适合自适应网页设计。
   1）实施起来代价更低，测试更容易
   2）自适应布局可让设计更加可控，由于它只须要考虑几种状态就能够了

三、自适应网站和响应式网站各自的弊端
自适应网站的手机站有时没法作到与PC站内容彻底一致，且工做量大，自适应手机站每每使用不一样的子域名或目录跳转，对于优化来说权重分散，访客浏览体验仍有缺陷。
响应式网设计每每风格有些局限，对于复杂的框架结构难以实现，制做流程复杂，代码兼容性要求较高。

开发难度比较

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

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

页面性能比较

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

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

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

用户体验比较

响应式网站保证PC端与移动端的一致性，流式布局;
自适应网站保证移动端更友好的体验。

SEO比较

自适应网站不容易汇集网站权重，但能够经过重定向进行汇集权重。
响应式网站容易汇集网站权重，容易把移动端的权重与PC端的权重叠加，提升网站排名。
PS:这种作法是电脑端与移动端使用单独的网址。

小结

一路看下来，算是对响应式跟自适应有了大体了解，所以想总结下：

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

响应式就至关于液体，它能够自动适应不一样尺寸的屏幕，不管你的设备尺寸多么奇葩。
响应式使用CSS media queries的方法，根据目标设备自动改变风格如显示类型,宽度、高度等，这能很好解决不一样屏幕尺寸的显示问题。

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

@media

响应式针对的是不一样分辨率设备而进行的适配式设计，以利用@media规则为主要手段，
而自适应则忽略@media以比例布局为主，目的是适应不一样的浏览器窗口大小。

其余

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

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

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

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

最后附上一个测试响应式的网址，支持跨屏，取需：
http://www.kuapingce.com/

谢谢你们~