响应式布局和自适应布局

一、区别：

响应式布局等于流动网格布局，自适应布局等于使用固定分割点来进行布局

二、响应式布局

实现不同屏幕分辨率的终端上浏览网页的不同展示方式

1、设置meta标签

下面的视图标签告诉浏览器，使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。

　　

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) {}