响应式WEB设计_html/css_WEB-ITnose

近期在学习有关响应式设计的内容，对此做了些整理，部分图片来源于网络。

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

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

　　简而言之，有如下几点：

2、什么是响应式web设计

　　一个网站兼容多个终端。

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

　　开发针对网站的、完全独立的移动版本，开发移动应用APP。但这样做也存在一定的不足：

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

　　优势：

　　不足：

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

　　响应式布局：流体网络

　　自适应布局：固定断点

6、移动终端屏显元素

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

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

　　移动设备的分辨率：

7、响应式web设计流程

　　用户研究与设备规格预估

　　框架原型规划&测试

　　视觉设计

　　前端构建