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

固定布局（fixed layout）

即传统布局，网页上的所有元素的尺寸一律用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

静态布局的优点是对设计师和CSS编写者来说是最简单的，没有兼容性问题。缺点也很明显，不能根据用户的品目尺寸做出不同的表现。

当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种完全兼容未来网页的制作方法，我们需要一些适应未知设备的方法。

流式布局（fluid layout）

页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。

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

这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”），显示非常不协调。

自适应布局和响应式布局

参考"Responsive design和Adaptive design的区别？"这篇文章中的多个回答可以知道，两者都是根据不同的设备呈现不同的页面布局，但实现上有所不同：

• 自适应布局是服务器根据HTTP请求中携带的用户设备信息返回服务器上针对不同设备的网页文件，需要事先编写多套页面；
• 响应式布局是服务器返回的是同一套网页文件，但会采用@media技术在前端监测设备信息，从而决定使用哪些样式文件；

为什么有这两种方案，并且经常引起混淆呢。有一个答案说得比较合理，那就是以前都是PC端的网页，后来慢慢地移动端兴起，各公司需要添加移动端的网页，服务器针对不同的终端返回不同的页面，这时候产生了自适应布局的概念；后来出现了css3、media、viewport等新特性，这时候开发新网站，就可以用一套网页来适应所有终端，这时候产生了响应式布局的概念。但自适应并不会被淘汰，因为从seo角度来看，google的amp、百度的mip都要求移动端采用不同的html标签，这时候自适应就是不二选择。

自适应布局的实现不用多说，编写多套网页就行了，接下来主要讲响应式布局的实现。

响应式布局的实现说来也简单，在css文件层面上，我们可以这样做：

<link rel="stylesheet" type="text/css" href="common.css" media="all" />
<link rel="stylesheet" type="text/css" href="normalScreen.css" media="screen and (max-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="widthScreen.css" media="screen and (min-width: 1024px)" />

对于IE6~8，应改写为：

<script>
  if (!window.screenX) {
    //IE6~8
    var oStyle = document.createElement("link");
    oStyle.rel = "stylesheet";
    oStyle.type = "text/css";
    if (screen.width > 1024) {
      oStyle.href = "widthScreen.css";	
    } else {
      oStyle.href = "normalScreen.css";	
    }
    document.getElementsByTagName("head")[0].appendChild(oStyle);
  }
</script>

在选择器层面上在，则可以这样做：

.example {
  padding: 20px;
  color: white;
}
/* 超小型设备（手机） */
@media only screen and (max-width: 600px) {
  .example { background-color: red; }
}
/* 小型设备（竖屏平板电脑） */
@media only screen and (min-width: 600px) {
  .example { background-color: green; }
}
/* 中型设备（横屏平板电脑） */
@media only screen and (min-width: 768px) {
  .example { background-color: orange; }
}
/* 大型设备（笔记本电脑和台式电脑） */
@media only screen and (min-width: 992 px) {
  .example { background-color: blue ; }
}
/* 超大型设备（大型笔记本和台式电脑） */
@media only screen and (min-width: 1200px) {
  .example { background-color: pink; }
}

参考资料

1. 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别
2. 三种常见的响应式布局
3. 应运而生的web页面响应布局
4. 折腾响应式布局设计
5. 应运而生的web页面响应布局。