布局管理
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.自适应布局
使用固定分割点来进行布局
