响应式布局就是指一个页面同时适应多种不同的端口

主要实现方式：  百分比自适应布局

1.可采用媒体查询的方式

     @media screen and (min-width:1000px){...}              对应PC端页面

     @media screen and (max-width:1000px) and (min-width:768px) {...}        对应平板端页面

     @media screen and (max-width:768px){...}           对应手机端页面

 

2.采用bootstrap框架布局

　  bootstrap框架布局完成的页面，是自动对应的自适应效果。

      这需要我们严格按照bootstrap的书写规范，才不会出现怪异的问题。

     写法举例：

      <div class="col-md-6 col-sm-6  col-xs-12">

      说明：最后的数字对应该div所占栅栏的列数。

               col-md-6 代表在PC端上显示在一行的6个栅栏，也就是一半。

              col-sm-6 代表在平板上也显示div占当前行的一半。

              col-xs-12 代表在手机端显示为当前行的百分之百填充。

 3. 还可以引入适配js文件，如 jquery 和专门做响应式的JS文件，均能实现自适应效果，实现响应式布局。