3、响应式布局？什么是响应式布局？如何实现响应式布局？

3.1什么是响应式布局？

答：在一个项目的内容（模块、布局、内容）发生增删改时，项目可以自适应的发生一定变化而且不影响用户使用，且更换不用的设备可以同样访问此项目；这样的布局叫做响应式布局！

优点：一个项目适应不用设备；缺点：开发成本高，设计和ui方案都比较多；

3.2如何实现响应式布局？

答：媒体查询：监测设备的特性，根据所指定的条件，设置不同的css样式。

    （例如：监测浏览器窗口的宽度，如果小于320px  body背景为红色）

    媒体查询一般监测：视口的宽度、浏览器窗口的宽、屏幕的比例、横屏、竖屏......

      媒体查询的组成：

        @media 设备类型[all\screen] and (条件表达式) and (条件表达式){  css样式  }

   注：and关键字两侧必须有空格，条件表达式不需要分号结束；

通过识别设备改变布局！

例如：

 @media not all and (min-width:1000px) and (max-width:1200px){

  body{     background:red;     }

        }