一. 静态布局

静态布局就是每一个元素都用px写死。这种布局方法毫无疑问是最简单（因为不用考虑不同分辨率的情况），同时也是最糟糕的。

不过，现代大多数企业的PC站点先使用一个静态布局，然后移动端再单独设计一个布局。

 

二. 弹性布局

弹性布局采用高级的度量单位（如em, rem）来度量文字的大小，其它采用px来进行度量。

这样做得好处是，在其它元素不变的情况下，我们的文字可以根据具体的分辨率放大和缩小。

这在移动端是非常有益处的，因为在移动端，我们经常会因为分辨率的问题，导致网页的缩放，字也看不清，给人一种非常不爽的感觉。

 

三. 自适应布局

自适应布局就是结合CSS3的@media查询，根据不同的分辨率范围选择不同的静态布局页面。

对于同一设备而言，获得的其实是一个静态页面，这个页面的大小是不会再改变的了，即使你再之后修改了分辨率。

相对于之前两种布局而言，自适应布局有了很大的进步，已经有响应式布局的影子了。

 

四. 流式布局

流式布局就是大部分元素高度用px写死，然后宽度用百分比布局。

典型的案例如bootstrap的栅格系统。

这样做主要是为了在相近的分辨率范围之内兼容。当然，如果分辨率相差得特别大，那效果肯定不好。

这里我们可以稍微讲得详细一点，流式布局主要有以下几种：

  1. 左侧固定，右侧百分比。
  2. 右侧固定，左侧百分比。
  3. 两侧固定，中间百分比（圣杯布局或者叫双飞翼布局）。-->由此可见布局也有上下级之分.
  4. 所有的都按照百分比来。

流式布局的实现方式：

  1. 一个就是按照之前的定义，使用百分比布局。
  2. 可以给父元素写一个display:flex, 然后子元素使用flex进行布局。
  3. 创建BFC(Block Formating Context), 也就是在并列子元素中创建BFC。
  4. 之前提到的流式布局的最后一种，可以采用li+float的方法来实现。

 

五. 响应式布局

响应式布局是最完美的布局，他要确保的是在一个页面的所有终端上都保持一个非常好的效果。当然这对CSS程序员而言就不那么又好了233.

响应式布局的主要方法就是通过流式布局和自适应布局相结合，也就是利用媒体查询和自适应布局进行编写。