布局管理

1.响应式布局(Responsive design)

流动网格布局

响应式设计步骤
一，设置Meta标签

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

通过媒介查询(Media Queries)设置样式
media是是响应式的设计核心，根据条件告诉浏览器如何为指定视图宽度渲染页面，若一个终端的分辨率始终小于980px

那么可以这样写：

@media screen and (max-width: 980px) {
  #head { … }
  #content { … }
  #footer { … }
}

设置多种视图宽度
例如兼容ipad 和iPhone的视图，这样设置

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

宽度百分比

#head { width: 100% }
#content { width: 50%; }

图片缩放方法

1，百分比缩放
2，img{width:auto,max-width:100%}

2.自适应布局

使用固定分割点来进行布局