响应式布局和自适应布局

一、区别：

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

二、响应式布局

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

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- 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

3、设置多种视图宽度

/** iPad **/
@media only screen and (min- 768px) and (max- 1024px) {}
/** iPhone **/
@media only screen and (min- 320px) and (max- 767px) {}