静态布局、流式布局、自适应布局、响应式布局、弹性布局

• 静态布局：

特色：没有兼容性问题

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

• 流式布局：

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

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

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

• 自适应布局

特色：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化

设计：使用 @media 媒体查询给不一样尺寸和介质的设备切换不一样的样式

• 响应式布局

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

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作单位。