# 基本概念
# 静态布局
静态布局（Static Layout），即传统Web设计，网页上的所有元素的尺寸一律使用 px 作为单位。
当前，大部分门户网站、大部分企业的 PC 宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。
# 布局特点
不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的 PC 网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于 PC 端。
# 设计方法
- PC：居中布局，所有样式使用绝对宽度/高度（
px），设计一个 Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； - 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如
wap.xxx.com或m.xxx.com。
# 优缺点
- 优点：这种布局方式对设计师和 CSS 编写者来说都是最简单的，亦没有兼容性问题
- 缺点：显而易见，即不能根据用户的屏幕尺寸做出不同的表现
# 流式布局
流式布局（Liquid Layout），特点是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
网页中主要的划分区域的尺寸使用百分数（搭配 min-*、max-* 属性使用）。例如，设置网页主体的宽度为 80%，min-width 为 960px，图片也作类似处理（width:100%，max-width 一般设定为图片本身的尺寸，防止被拉伸而失真）。
# 布局特点
屏幕分辨率变化时，页面里元素的大小会变化而布局不变，这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
# 设计方法
使用百分比 % 定义宽度，高度大都是用 px 来固定住，可以根据可视区域（viewport）和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
# 优缺点
- 优点：在 Web 前端开发的早期历史上，用来应对不同尺寸的 PC 屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式
- 缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用百分比
%定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得「流式」），显示非常不协调
# 自适应布局
自适应布局（Adaptive Layout），特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。
# 布局特点
屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
# 设计方法
使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
# 响应式布局
响应式布局（Responsive Layout），分别为不同的屏幕分辨率定义布局，同时在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
# 布局特点
每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
# 设计方法
媒体查询+流式布局。通常使用「@media 媒体查询」和「网格系统」（Grid System）配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
# 优缺点
- 优点：适应 PC 和移动端，如果足够耐心，效果完美
- 缺点：
- 媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高
- 要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本