1、为什么需要响应式web设计

由于目前移动设备的大量使用，以及PC显示器的尺寸逐渐出现较大差别，传统的web页面已经不能满足多种设备的浏览效果，比如传统页面在大浏览器中会有较大的空白区域，而在小浏览器已经移动设备中，不能完全显示页面，或是将页面缩小至适应移动设备尺寸大小，不能正常浏览，对于点击触点也有影响，很多人会选择放大页面，在进行浏览，这样整个页面就需要不停的拖动，给用户的体验不好。

各种屏幕尺寸各种操作系统各种访问设备各种需求：

2、什么是响应式web设计

一个网站兼容多个终端。

同样的代码，通过设备适配，满足不同的访问设备，能展现出不同的效果，这就是web响应式。

3、响应式设计的替代方案

开发针对网站的、完全独立的移动版本，开发移动应用APP。但这样做也存在一定的不足。例如：开发独立版本的网页，可以通过设备适配进行跳转，需要维护多个页面，对于首页级别页面适用，不适用于内容页开发移动应用，开发成本高，不利于搜索引擎收录。

4、响应式web设计的优势&不足

优势：

多终端视觉和操作体验风格统一开发、维护、运营成本低不同设备间的兼容性强操作灵活；响应式设计是针对页面的，可以只对必要的页面部分进行改动对用户友好；用户可以与网站一直保持联系，比如URL不变积累分享；通过单一的URL地址收集所有的社交分享链接最佳化搜索引擎；可以完成移动网站和桌面网站的连接无重定向：包含无用户代理定向。

不足：

兼容性：低版本浏览器可能存在不兼容问题移动带宽流量：相比移动版定制网站，流量稍大加载需要一定的时间；在响应式设计中，需要下载一些看起来并不必要的HTML、CSS。除此之外，图片并没有根据设备调整到合适大小，而这正式导致加载时间加倍的原因优化搜索引擎；对于响应式web设计，为搜索引擎确定关键字不是一件容易的事。

5、响应式与自适应的区别

响应式布局：流体网络

网页的布局改变重新排布更好的用户体验测试难度大。

自适应布局：固定断点

网页的完全缩放实施代价低测试容易设计更加可控。

6、移动终端屏显元素

移动设备浏览器内核：Trident（IE）、Gecko（FF）、Presto（opera，已废弃）、Webkit（Safari、chrome）、Blink（google）。

移动设备的尺寸：iPhone（980），iPad（1024），Android（分辨率480*800情况下，980），WinPhone（1024）等。

下图为移动设备的分辨率：