第一阶段
现在已经很少有人提及，其实最早的页面布局是使用table布局的，那时候的网页设计师基本不会担心跑位的问题，但是随着网页的功能越来越复杂，CSS的表现力越来越强，对HTML文档的语义化要求和页面加载速度的要求越来越高，基本上已经没有前端再用table布局（不是说在网页中不适用table标签）。
第二阶段
在之后网页设计师采用一种叫div+css的布局方式，之所以这么命名，是因为那时候的HTML版本中div做为块级元素使用的非常频繁，为了区别于table布局方式，并指代结构与表现分离，就有了这样一个名字。由于当时的网页主要用于PC端，所谓div+css布局狭义的讲其实就是我们后面将提到的静态布局。
静态布局：
1、页面不会因为浏览器窗口的大小不同而不同，考虑目前主流电脑分辨率的宽度，UI的设计稿主体部分通常在1200像素以内，如果网页主体高于客户端分辨率，在浏览器中会出现横向滚动条，而不是缩小页面各元素。
2、页面元素的尺寸通常使用的px作为单位。
3、在浏览器窗口中观察,通常居中对齐显示，两侧留白。
显而易见使用静态布局不能根据用户的屏幕尺寸做出不同的表现。对于大的屏幕浪费了屏幕空间，小的屏幕可能出现横向滚动条。
为了应对不同尺寸的PC屏幕，于是出现了流式布局方式。
流式布局（Liquid Layout）
页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
这种布局方式宽度使用百分比定义，但是高度和文字大小等大都是用px来固定，所以这种布局方式在之后的移动端页面大行其道时，应用的十分不理想。在不同的手机视窗中宽度都可以拉到100%，但是高度、文字大小却不变，用户体验非常不好。
第三阶段
随着智能手机的流行，使浏览器能够在手机上运行，于是就有了移动端的网页，一个普通的静态布局网页在手机浏览器中是这个样子的：
这样显然不利于阅读，有了需求自然就有改变，在CSS3中新增了媒体属性和使用场景，其实在CSS2中媒体查询使用于<style>和<link>标签中，以media属性存在。
媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式。
媒体查询为移动端布局提供了解决方案，也就是媒体查询的应用，让我觉得可以成为网页布局的第三个阶段。
下面将分别介绍一下：
自适应布局（Adaptive Layout）
自适应布局的特点是分别为不同的屏幕分辨率分别布局，也就是创建多个布局，每个布局对应一个屏幕分辨率范围。
即：创建多个静态布局，分别对应一个屏幕分辨率范围。
有人说这种布局方式是静态布局的一种，其实自适应布局和响应式布局的界限并不明晰。我认为它是一种切换布局方案的思路，倒未必真的是一种布局方式。不过对这个问题我们不必过分纠结，了解它的道理就好。
常见的方式是根据不同的屏幕分辨率来应用不同的样式表文件。
<link rel="stylesheet" type="text/css" href="m.css" media="screen and (max-width:1200px)"/>
<link rel="stylesheet" type="text/css" href="pc.css" media="screen and (min-width:1201px)"/>
响应式布局（Responsive Layout）
可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机）都能显示出令人满意的效果，搭配媒体查询技术分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
即：创建多个流体式布局，分别对应一个屏幕分辨率范围。
一度响应式几乎已经成为优秀页面布局的标准。
优点：可以同时适应不同分辨率的PC端以及移动端
缺点：
- 媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。
- 要匹配足够多的屏幕大小，UI和前端的工作量都不小。
通常应用响应式布局时改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，要发挥响应式布局的特长需要UI了解这种布局方式，并给出多种方案。
之后我会将响应式布局的一个经典Bootstrap，敬请期待。
rem布局
或许rem布局不应该称其为布局方式，实际上页面布局中rem结合其他布局方式来实现实现等比例适配所有屏幕。
rem和em都是网页中的相对单位，在现在的移动端布局中rem非常重要。通过将页面元素的尺寸设置为rem相对尺寸。
rem是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。
rem和em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于HTML根元素。
rem这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
第四阶段
为什么到这里有要用一个新阶段命名了呢？