一、区别：
响应式布局等于流动网格布局，自适应布局等于使用固定分割点来进行布局
二、响应式布局
实现不同屏幕分辨率的终端上浏览网页的不同展示方式
1、设置meta标签
下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
2、通过媒体查询来设置样式 media queries
media queries是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。
假如一个终端的分辨率小于980px
@media screen and (max-width: 980px) {
#head { … }
#content { … }
#footer { … }
}
3、设置多种视图宽度
/** iPad **/
@media only screen and (min-width: 768px) and (max-width: 1024px) {}
/** iPhone **/
@media only screen and (min-width: 320px) and (max-width: 767px) {}