响应式布局意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。响应式 Web 设计是一个让用户通过各种尺寸的设备浏览网站获得良好的视觉效果的方法。例如，您先在计算机显示器上浏览一个网站，然后再智能手机上浏览，智能手机的屏幕尺寸远小于计算机显示器，但是你却没有感觉到任何差别，两者的用户体验几乎一样，这说明这个网站在响应式设计方面做得很好。
响应式的优点和缺点：
优点：
1、面对不同分辨率设备灵活性强。
2、能够快捷解决多设备显示适应问题。
缺点：
1、兼容各种设备工作量大，效率低下。
2、代码累赘，会出现隐藏无用的元素，加载时间加长。
响应式的设计有三种方法：
1、使用Meta标签
2、通过使用媒体查询设置样式@Media
3、设置视图的宽度 通过百分比
响应式的步骤：
1、使用Meta标签
大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2、通过使用媒体查询设置样式@Media
@media screen and (min-640px)and(max-960px)
这句的意思是在大于640小于960的分辨率下所激活的样式表，这个语句就是响应式布局的基础应用了。在判断终端分辨率大小后，赋予不同的样式进去，就像下面的例子：
@media screen and(max-560px){
body{}
}
最大是560的分辨率
@media screen and (min-640px)and(max-960px){
body{}
}
640到960之间的分辨率
3、设置视图的宽度
通过百分比控制宽度也能实现响应式,不用像素px这种固定的单位来控制，也可以使用em来定义
例如：#heade{100%}
#footer{60%;}