浅谈静态布局、流式布局，rem布局，弹性布局、响应式布局

• 静态布局：

特点：没有兼容性问题

PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.

　　·流式布局：
特点：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。

设计：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围

　　<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
　　/* device-width为屏幕的输出宽度 */

　　响应式布局
设计：媒体查询+流式布局

1.设置 Meta 标签

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

2.通过媒介查询来设置样式 Media Queries

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

　　弹性布局（rem/em布局）
包裹文字的各元素的尺寸采用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放；

而页面的主要划分区域的尺寸仍使用百分数或px做单位