1、静态布局（Static Layout）即传统Web设计，网页上的全部元素的尺寸一概使用px做为单位。
一、布局特色：无论浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，若是小于这个宽度就会出现滚动条，若是大于这个宽度则内容居中外加背景，这种设计常见与pc端。
二、设计方法：
PC：居中布局，全部样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外创建移动网站，单独设计一个布局，使用不一样的域名如wap.或m.。
在移动端开发中采用静态布局的两种方式：(来自：流布局与响应式网页设计有什么区别？)
（1）在viewport meta标签上设置width=320，页面的各个元素也采用px做为单位。经过用JS动态修改标签的initial-scale使得页面等比缩放，从而恰好占满整个屏幕。（见前端开发-web app 变革之rem）
（2）设在viewport meta标签上设置content"width=640,user-scalable=no，页面的各个元素也采用px做为单位。因为640px超出了手机宽度，浏览器会自动缩小页面至恰好全屏。（具体见content"width=640,user-scalable=no" 而后再进行固定尺寸的px设计？ - 前端开发）
优势：这种布局方式对设计师和CSS编写者来讲都是最简单的，亦没有兼容性问题。
缺点：显而易见，即不能根据用户的屏幕尺寸作出不一样的表现。
当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种彻底兼容将来网页的制做方法，咱们须要一些适应未知设备的方法。css
2、流式布局（Liquid Layout）
流式布局（Liquid）的特色（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但总体布局不变。表明做栅栏系统（网格系统）。
网页中主要的划分区域的尺寸使用百分数（搭配min-、max-属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也做相似处理（width:100%, max-width通常设定为图片自己的尺寸，防止被拉伸而失真）。
一、布局特色：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就致使若是屏幕太大或者过小都会致使元素没法正常显示】
二、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，能够根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽量的适应各类分辨率。每每配合 max-width/min-width 等属性控制尺寸流动范围以避免过大或者太小影响阅读。
这种布局方式在Web前端开发的早期历史上，用来应对不一样尺寸的PC屏幕（那时屏幕尺寸的差别不会太大），在当今的移动端开发也是经常使用布局方式，但缺点明显：主要的问题是若是屏幕尺度跨度太大，那么在相对其原始设计而言太小或过大的屏幕上不能正常显示。由于宽度使用%百分比定义，可是高度和文字大小等大都是用px来固定，因此在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，可是高度、文字大小仍是和原来同样（即，这些东西没法变得“流式”），显示很是不协调。html
3、自适应布局（Adaptive Layout）
自适应布局的特色是分别为不一样的屏幕分辨率定义布局，即建立多个静态布局，每一个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率能够切换不一样的静态局部（页面元素位置发生改变），但在每一个静态布局中，页面元素不随窗口大小的调整发生变化。能够把自适应布局看做是静态布局的一个系列。一、布局特色：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
二、设计方法：使用 @media 媒体查询给不一样尺寸和介质的设备切换不一样的样式。在优秀的响应范围设计下能够给适配范围内的设备最好的体验，在同一个设备下实际仍是固定的布局。前端
4、响应式布局（Responsive Layout）
随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在全部终端上（各类尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出使人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但一般是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不一样的屏幕分辨率定义布局，同时，在每一个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：建立多个流体式布局，分别对应一个屏幕分辨率范围。能够把响应式布局看做是流式布局和自适应布局设计理念的融合。
响应式几乎已经成为优秀页面布局的标准。
一、布局特色：每一个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
二、设计方法：媒体查询+流式布局。一般使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术经过 CSS 给单一网页不一样设备返回不一样样式的技术统称。
优势：适应pc和移动端，若是足够耐心，效果完美
缺点：
（1）媒体查询是有限的，也就是能够枚举出来的，只能适应主流的宽高。
（2）要匹配足够多的屏幕大小，工做量不小，设计也须要多个版本。程序员
响应式页面在头部会加上这一段代码：
<meta name="applicable-device" content="pc,mobile"> <meta http-equiv="Cache-Control" content="no-transform ">
总结：
响应式与自适应的原理是类似的，都是检测设备，根据不一样的设备采用不一样的css，并且css都是采用的百分比的，而不是固定的宽度，不一样点是响应式的模板在不一样的设备上看上去是不同的，会随着设备的改变而改变展现样式，而自适应不会，全部的设备看起来都是一套的模板，不过是长度或者图片变小了，不会根据设备采用不一样的展现样式，流式就是采用了一些设置，当宽度大于多少时怎么展现，小于多少时怎么展现，并且展现的方式向水流同样，一部分一部分的加载，静态的就是采用固定宽度的了。
流式布局是用于解决相似的设备不一样分辨率之间的兼容(通常分辨率差别较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(通常是指PC，平板，手机等设备之间较大的分辨率差别)。
如何实现响应式布局：折腾响应式布局设计，应运而生的web页面响应布局web
5、弹性布局（rem/em布局）chrome
参考：流布局与响应式网页设计有什么区别？
一、rem,em区别：rem,em都是顺应不一样网页字体大小展示而产生的。其中，em是相对其父元素，在实际应用中相对而言会带来不少不便；而rem是始终相对于html大小，即页面根元素。浏览器
二、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时能够支持浏览器的字体大小调整和缩放等的正常显示，由于em是相对父级元素的缘由没有获得推广。【中国站点制做网页的时候，习惯用CSS强制定义字体大小，保证每一个人都看到一致的效果，包括网易、搜狐这些门户网站在内的大部分站点，用的都是绝对单位px（像素）。可是，若是从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人须要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的IE没法调整那些使用px做为单位的字体大小。国外人士很是重视网站的易用性，至关一部分外国站点已经使用em做为字体单位。】三、这类布局的特色是，包裹文字的各元素的尺寸采用em/rem作单位，而页面的主要划分区域的尺寸仍使用百分数或px作单位（同「流式布局」或「静态/固定布局」）。早期浏览器不支持整个页面按比例缩放，仅支持网页内文字尺寸的放大，这种状况下。使用em/rem作单位，可使包裹文字的元素随着文字的缩放而缩放。app
四、浏览器的默认字体高度通常为16px
，即1em:16px，可是 1:16 的比例不方便计算，为了使单位em/rem更直观，CSS编写者经常将页面跟节点字体设为62.5%，好比选择用rem控制字体时，先须要设置根节点html的字体大小，由于浏览器默认字体大小16px*62.5%=10px。这样1rem即是10px，方便了计算。
Set body font-size to 62.5% for Easier em Conversion:
If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).wordpress
那么为何通常可能是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
由于有些浏览器默认的不是16px，或者用户修改了浏览器默认的字体大小（因浏览器分辨率大小，视力，习惯等因素）。若是咱们将其设置为10px，必定会影响在这些浏览器上的效果，因此最好用绝大多数用户默认的16做为基数 * 62.5% 获得咱们须要的10px。工具
实际项目设置成 font-size: 62.5%可能会出现问题，由于chrome不支持小于12px的字体，计算小于12px的时候，会默认取12px去计算，致使chrome的em/rem计算不许确。
针对这个现象，能够尝试设置html字体为100px，body 修正为16px，这样 0.1rem 就是 10px，而body的字体仍然是默认大小，不影响未设置大小的元素的默认字体的大小。
五、用em/rem定义尺寸的另外一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等状况（由于em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }
六、使用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简单得多）。
html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 428px){ html { font-size: 26.75px !important; } } @media only screen and (min-width: 481px){ html { font-size: 30px !important; } } @media only screen and (min-width: 569px){ html { font-size: 35px !important; } } @media only screen and (min-width: 641px){ html { font-size: 40px !important; } }
其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的缘由归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，能够实现完美的流式布局（高度和文字大小均可以变得“流式”），弹性布局就再也不必要了。详细可参考：视区相关单位vw, vh..简介以及可实际应用场景
如下优缺点参考：响应式设计和REM布局的对比（有疑问）优势：理想状态是全部屏幕的高宽比和最初的设计高宽比同样，或者相差很少，完美适应。缺点：这种rem+js只不过是宽度自适应，高度没有作到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。若是只是宽度自适应，更推荐响应式设计。响应式和弹性布局之间的对比：响应式布局：改变浏览器宽度，“布局”会随之变化，不是一成不变的，例如导航栏在大屏幕下是横排，在小屏幕下是竖排，在超小屏幕下隐藏为菜单，也就是说若是有足够的耐心，在每一种屏幕下都应该有合理的布局，完美的效果。rem布局：改变浏览器宽度，页面全部元素的高宽都等比例缩放，也就是大屏幕下导航是横的，小屏幕下仍是横的只不过变小了。结论：1.若是只作pc端，那么静态布局（定宽度）是最好的选择；2.若是作移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；3.若是pc，移动要兼容，并且要求很高那么响应式布局仍是最好的选择，前提是设计根据不一样的高宽作不一样的设计，响应式根据媒体查询作不一样的布局。