响应式开发

响应式开发是指一个网站能够兼容多个终端，不同屏幕分辨率的终端上网页展示方式是不一样的。实现原理：根据用户的行为以及设备的不同，实现页面的不同展示效果

具体的开发过程：

 （1）设置视口标签

                   

                    <meta name="viewport" content="width=device-width, initial-scale=1.0">

                        width:视口的宽度（device-width 设备的宽度）

                        initial-scale: 设置初始缩放比例

                        maximum-scale: 设置最大缩放比例

                        minimum-scale:设置最小缩放比例

                        user-scalable：no 不允许用户进行缩放

（2）设置流式布局（百分比布局）

                   

                    水平方向采用百分比，垂直方向使用定值

（3）模块布局的响应

                    模块中内容：挤压－拉伸

                    模块中内容：换行－平铺

                    模块中内容：删减－增加

                    模块位置的变化

       涉及到的布局技巧的应用，如：尽量少使用绝对宽度、百分比布局、弹性盒、弹性网格\浮动技巧、定位技巧的应用、box-sizing,显示隐藏的应用

（4）响应式图片

       前景图：通过css样式使用百分比，来进行控制图片缩放

       背景图：background-size属性值设置为百分比值或cover，contain等，将实现背景图片的大小跟随元素大小响应变化

(5) 响应式文字

    相对单位在字号、行高中的应用可以一定程度上提升效率精简代码

（6）屏幕区间的设置

         大屏优先或移动端优先

响应式布局的优缺点

优点 ：

        面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题

       节省设计、开发、维护成本【不再特定的维护PC页面，移动页面】

缺点： 流式布局对版面设计有一定要求存在局限性

            兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长

             影响用户体验(一定程度上改变了网站原有的布局结构，会出现用户混淆的情况 兼容问题（IE8以下不支持）