布局的几种方式（静态布局、自适应布局、流式布局、响应式布局、弹性布局）

1、静态布局（static layout）

　　即传统Web设计，网页上的全部元素的尺寸一概使用px做为单位。

一、布局特色

　　无论浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，若是小于这个宽度就会出现滚动条，若是大于这个宽度则内容居中外加背景，这种设计常见于pc端。

 

二、设计方法

　　PC：居中布局，全部样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
　　移动设备：另外创建移动网站，单独设计一个布局，使用不一样的域名如wap.或m.。

 

优势：这种布局方式对设计师和CSS编写者来讲都是最简单的，亦没有兼容性问题。

缺点：显而易见，即不能根据用户的屏幕尺寸作出不一样的表现。当前，大部分门户网站、大部分企业的PC宣传站点都采用了这种布局方式。固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法。但这种方法不是一种彻底兼容将来网页的制做方法，咱们须要一些适应未知设备的方法。

 

 

2、流式布局（Liquid Layout）

　　流式布局（Liquid）的特色（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但总体布局不变。表明做栅栏系统（网格系统）。

　　网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也做相似处理（width:100%, max-width通常设定为图片自己的尺寸，防止被拉伸而失真）。

1. 布局特色

　　屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。【这就致使若是屏幕太大或者过小都会致使元素没法正常显示。

 

2. 设计方法

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

 

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

 

 

3、自适应布局（Adaptive Layout）

　　自适应布局的特色是分别为不一样的屏幕分辨率定义布局，即建立多个静态布局，每一个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率能够切换不一样的静态局部（页面元素位置发生改变），但在每一个静态布局中，页面元素不随窗口大小的调整发生变化。能够把自适应布局看做是静态布局的一个系列。

一、布局特色

　　屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。

二、设计方法

　　使用 @media 媒体查询给不一样尺寸和介质的设备切换不一样的样式。在优秀的响应范围设计下能够给适配范围内的设备最好的体验，在同一个设备下实际仍是固定的布局。

 

 

 

4、响应式布局（Responsive Layout）

　　随着CSS3出现了媒体查询技术，又出现了响应式设计的概念。响应式设计的目标是确保一个页面在全部终端上（各类尺寸的PC、手机、手表、冰箱的Web浏览器等等）都能显示出使人满意的效果，对CSS编写者而言，在实现上不拘泥于具体手法，但一般是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。——分别为不一样的屏幕分辨率定义布局，同时，在每一个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。即：建立多个流体式布局，分别对应一个屏幕分辨率范围。能够把响应式布局看做是流式布局和自适应布局设计理念的融合。

　　响应式几乎已经成为优秀页面布局的标准。

1. 布局特色

　　每一个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。

2. 设计方法

　　媒体查询+流式布局。一般使用 @media 媒体查询 和网格系统 (Grid System) 配合相对布局单位进行布局，实际上就是综合响应式、流动等上述技术经过 CSS 给单一网页不一样设备返回不一样样式的技术统称。

优势：适应pc和移动端，若是足够耐心，效果完美。

缺点：（1）媒体查询是有限的，也就是能够枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工做量不小，设计也须要多个版本。

响应式页面在头部会加上这一段代码：
<meta name="applicable-device" content="pc,mobile">
<meta http-equiv="Cache-Control" content="no-transform ">

 

5、弹性布局（rem/em布局）

1. rem/em区别：rem是相对于html元素的font-size大小而言的，而em是相对于其父元素。

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，方便了计算。

5. 用em/rem定义尺寸的另外一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等状况（由于em/rem相对于字体大小，会同步改变）。例如：p{ text-indent: 2em; }。

6. 使用rem单位的弹性布局在移动端也很受欢迎。

7. 其实在移动端使用所谓的弹性布局，是比较勉强的。移动端弹性布局流行起来的缘由归根结底是rem单位对于（根据屏幕尺寸）调整页面的各元素的尺寸、文字大小时比较好用。其实，使用vw、vh等后起之秀的单位，能够实现完美的流式布局（高度和文字大小均可以变得“流式”），弹性布局就再也不必要了。

 

结论

1.若是只作pc端，那么静态布局（定宽度）是最好的选择；

2.若是作移动端，且设计对高度和元素间距要求不高，那么弹性布局（rem+js）是最好的选择，一份css+一份js调节font-size搞定；

3.若是pc，移动要兼容，并且要求很高那么响应式布局仍是最好的选择，前提是设计根据不一样的高宽作不一样的设计，响应式根据媒体查询作不一样的布局。

 

　

参考文章: http://www.cnblogs.com/yanayana/p/7066948.html