前端页面布局方式总结

前端布局方案灵活，方式并不唯一，仅供参考。

1. 弹性布局（flex）

布局概念

Flexible Box，弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使 的一些复杂易错的hacks方法(如float实现流式布局)。

优点

简单、方便、快速。

缺点

CSS3新特性,浏览器兼容性有待改善。手机浏览器对flex的支持不是很理想。
 
 

2. 流式布局（Liquid Layout）

布局概念

流式布局也叫百分比布局（某个网格的宽度为固定的百分比，其余网格平均分配剩余的空间）
这边引入一下自适应布局:分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。
流式布局常用的设计模板:左侧固定+右侧自适应左右固定宽度+中间自适应(参考京东手机版)
页面元素的宽度按照屏幕进行适配调整，主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示 。 你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。

优点

元素的宽高用百分比做单位，元素宽高按屏幕分辨率调整，布局不发生变化

缺点

屏幕尺度跨度过大的情况下，页面不能正常显示。
 
 

3. 响应式布局(Responsive layout)

布局概念

采用自适应布局和流式布局的综合方式，为不同屏幕分辨率范围创建流式布局
现在优秀的页面都追求一套代码可以实现三端的浏览;从概念可以看出来,自适应布局的诞生是为了实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.
利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。
大名鼎鼎的bootstrap就是响应式布局的专家。
官方放出狠话:Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

优点

面对不同分辨率设备灵活性强；
能够快捷解决多设备显示适应问题。

缺点

兼容各种设备工作量大，效率低下；
代码累赘，会出现隐藏无用的元素，加载时间加长；
其实这是一种折衷性质的设计解决方案，多方面因素影响而达不到最佳效果；
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
 
 

4. 静态布局(Static Layout)

布局概念

最传统、原始的Web布局设计。网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow:scroll)来实现滚动查阅。

优点

采用的是css2之前的写法,不存在浏览器兼容性。布局简单。

缺点

但是移动端不可以使用pc端的页面,两个页面的布局不一致,移动端需要自己另外设计一个布局并使用不同域名呈现。
实现方法
PC端:最外层居中,使用固定的宽(高)度,超出部分用滚动条查阅。例如百度首页外层body设置了一个min-width:1000px;,当我打开调试器的时候,底部x轴滚动条就出现了。
 
 

5. 网格布局

布局概念

最简单的网格布局，就是平均分布。在容器里面平均分配空间，跟骰子布局很像，但是需要设置项目的自动缩放。

优点

固定灵活的的轨道尺寸；可以使用行号，名称或通过定位网格区域将项目放置在网格的精确位置；可以将多个项目放入网格单元格或区域中，他们可以彼此部分重叠。

缺点

兼容性不太好。
 
 

6. 圣杯布局（Holy Grail Layout）

布局概念

页面从上到下，分成三部分：头部（header），躯干（body），底部（footer）。其中躯干又分为三部分，从左到右：导航、主栏、副栏。如果是小屏幕，躯干的三栏自动变为垂直叠加。

优点

兼容性好，兼容若有主流浏览器，包括万恶的IE6；
可以实现主要内容的优先加载。

缺点

关联

和双飞翼布局实现部分类似。
 
 

7. 双飞翼布局

布局概念

实现一个两侧宽度固定，中间宽度自适应的三栏布局。（中间先加载渲染）

优点

兼容性好，兼容若有主流浏览器，包括万恶的IE6；
可以实现主要内容的优先加载。

缺点

关联

 
 

8. 悬挂式布局

布局概念

有时，主栏的左侧或者右侧，需要添加一个图片栏。

 
 

备注：

固定的底部，内容较少，无法占满一屏3的高度，底栏就会抬高到页面中间。