一、静态布局
传统的web设计，网页尺寸一般使用px作为单位，大部分pc端宣传网站都是用的这种布局，固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单的方法，但是他的兼容性不是很完全。
1.布局特点：不管浏览器尺寸是多少，网站的布局始终是按照最初写代码时的布局来显示的，静态布局也就是设置了最小宽度(min-width)，这样的话，我们写pc端网站，如果小于最小宽度就会出现滚动条，如果大于最小宽度，就把网站内容居中外加背景.
2.设计方法：pc端，内容居中，所有样式设置绝对宽度或高度，在调整屏幕高宽时，使用横向或竖向滚动条来查阅未显示的部分；移动端，单独设置布局，使用不用的域名，额外建立新的网页，用js判断pc和移动端，实现跳转。在移动端实现静态布局的两种方式：(2.1)在viewport meta标签上设置width=320，再通过js动态修改标签的initial-scale使得页面等比例缩放。(2.2)在viewport meta标签上设置content"width=640,user-scalable=no"，由于640超过了手机宽度，浏览器会自动缩小页面至刚好全屏。
优点：布局简单，容易编写，没有兼容性问题。
缺点：不能根据用户的屏幕尺寸做出不同的表现，用户体验效果不好。
二、流式布局
流式布局代表作栅栏系统(网格系统)，页面元素的宽度按照屏幕分辨率来进行适配的，但整体的布局不会变，一般网页尺寸主要是用百分数，搭配min-*和max-*来使用的。
1.布局特点：屏幕分辨率变化时，页面里面的元素大小会随着屏幕分辨率变化而变化，但布局不会改变。
2.设计方法：用百分比定义宽度，高度一般用px固定住，可以根据可视（viewport）和父元素的实时尺寸进行调整。尽可能的适应各种分辨率。往往是配合max-width和min-width等属性来控制尺寸流动范围，以免页面过大或者过小影响阅读。
三、自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
1、布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
2、设计方法：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局。
四、响应式布局
随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在所有终端上（各种尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出令人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：创建多个流体式布局，分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。
1、布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
2、设计方法：媒体查询+流式布局。通常使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
优点：适应pc和移动端，如果足够耐心，效果完美
缺点：（3.1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（3.2）要匹配足够多的屏幕大小，工作量大，设计也需要多个版本。
五、响应式布局（rem/em布局）
1、rem,em区别：rem,em都是顺应不同网页字体大小展现而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来很多不便；而rem是始终相对于html大小，即页面根元素。
2、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。【中国站点制作网页的时候，习惯用CSS强制定义字体大小，保证每个人都看到一致的效果，包括网易、搜狐这些门户网站在内的大部分站点，用的都是绝对单位px（像素）。但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。国外人士非常重视网站的易用性，相当一部分外国站点已经使用em作为字体单位。】
3、这类布局的特点是，包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种情况下。使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
4、浏览器的默认字体高度一般为16px，即1em:16px，但是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者常常将页面跟节点字体设为62.5%，比如选择用rem控制字体时，先需要设置根节点html的字体大小，因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px，方便了计算。
那么为什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
因为有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。如果我们将其设置为10px，一定会影响在这些浏览器上的效果，所以最好用绝大多数用户默认的16作为基数 * 62.5% 得到我们需要的10px。、
5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }
6、使用rem单位的弹性布局在移动端也很受欢迎。
工具ViewtoREM：PX转换到REM（自动预处理）
rem的定义：font size of the root element，rem是相对于根元素<html>来设置字体大小的，这就意味着，我们只需要根据自己的需求在根元素确定一个参考值。
rem与em、px的区别：
px：像素，比较精确的单位，但不好做响应式布局
em：以父节点font-size大小为参考点，标准不统一，容易造成混乱
REM支持的浏览器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8无法支持。
对于不同尺寸的屏幕，可以统一假设屏幕宽度为640px后编写CSS（当然你也可以假定统一为320px）。此时，我们设定html元素的font-size为40px（同样，只是举例），然后各处（元素尺寸、文字大小）使用rem作为单位，随后搭配媒体查询或JS，根据屏幕的大小来动态控制html元素的font-size（特定屏幕尺寸下，html元素的font-size应当设置为何值，是使用这个方案时设计师和程序员需要反复考虑后确定的，以下试举一段相关的CSS媒体查询代码），即可自动改变所有用rem定义尺寸的元素的大小（且CSS编写者在脑中进行换算的计算过程比em简单得多）。
移动端弹性布局流行起来的原因归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用
优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
缺点：这种rem+js只不过是宽度自适应，高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。
响应式和弹性布局对比：
响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说如果有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。
rem布局：改变浏览器宽度，页面所有元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下还是横的只不过变小了。
结论：
1.如果只做pc端，那么静态布局（定宽度）是最好的选择；
2.如果做移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；
3.如果pc，移动要兼容，而且要求很高那么响应式布局还是最好的选择，前提是设计根据不同的高宽做不同的设计，响应式根据媒体查询做不同的布局。
4.响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会，所有的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了。
5.流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。
文中难免有表述不准确的地方，欢迎指正。也欢迎交流，感谢阅读。