页面布局的几种方式

基本布局的几种方式:

（1）流体布局：

流布局与固定宽度布局基本不一样点就在于对网站尺寸的测量单位不一样。固定宽度布局使用的是像素，可是流布局使用的是百分比，看到百分比，你应该想到，这将提供了很强的可塑性和流动性。换句话说，经过设置了百分比，你将不须要考虑设备尺寸或者屏幕宽度大小了，结论就是，你能够为每种情形找到一种可行的方案，由于你的设计尺寸将适应全部的设备尺寸。流布局与媒体查询和优化样式技术的关系密切。

（2）固定布局

在固定布局中，网页的宽度是必须指定为一个像素值，通常设为960像素。在过去，开发人员发现960像素是最适合做为网格布局的宽度，由于960能够整除3，4，5，6，8，10，12和15。尽管到了今天，在web开发中仍是比较广泛使用固定宽度布局的，缘由是这种布局提供很强的稳定性与可控性。若是你知道你的网页宽度，就能够兼容全部浏览器与设备，你能够精确地控制图像位置，就好像一切尽在掌控之中。然而，固定宽度布局当然有些劣势，，想建立一个固定宽度布局网站的开发人员必须意识到网站是否能够在各式各样的屏幕，浏览器和设备中可用与可见地显示出来。如今市场上出现如此众多设备，意味着有各式各样的屏幕尺寸，对开发人员提出了“一种尺寸适应全部”的技术挑战，这种挑战已超越了固定宽度设计的精确度和可控制性。固定宽度的网站出错的一个常见例子就是小于960像素的屏幕尺寸是很是常见的。这样网站就不可以全屏显示了，你将看到一条水平的导航条。事实上,这些小屏幕一般用手指操做,而不是鼠标来控制。

（3）弹性布局：

弹性布局跟流布局很相像，主要不一样是大小单位。弹性布局的大小单位不是像素或者百分比，而是em。一个em单位等于定义在CSS规则：font-size的值大小。例如，咱们设置文本的font-size大小为20像素，那么1em就等于20px，2em就等于40px，以此类推。这种布局为开发人员提供了一种很强的排版控制。因为绝大多数的布局主要由文原本填充，此方案使弹性布局成为许多项目的强有力的竞争者。然而，仍是存在缺点就是在某些例子中依然出现使人不愉快的水平滚动条。

 

（4）混合布局

最后介绍这个混合布局，是上面介绍的两种或者更多布局类型的组合。例如，开发人员可能须要设置某些指定元素（侧栏或者底部）一个固定宽度，剩下的就选择百分比或者em。明显地，这种途径仍是有劣势——若是你是指侧栏的宽度为200像素，而后为剩下的内容设置为80%的宽度，当屏幕小于1000像素时，你将会看到一条水平滚动条，由于主要的列已经没有足够空间容纳了。现实中不多状况,在你的项目只会有一个元素。可是你能够很容易地解决这些问题,后面咱们将会学习到。

总结：

你可能想知道什么是最好的解决方案？上面列出的四种类型布局哪一种才是最适合做为响应式解决方案。你或许已经猜到,每一个布局类型都有其优势和缺点。这一切都取决于你的需求和项目的特色。这或者很容易导致你认为，这些布局之一都是广泛比其余的优秀的，但不能认为它们之间是互斥关系或是竞争对手。相反地,应该考虑技术,能够结合使用。许多这些技术不可能独立于其余技术而存在的。例如，若是没有定义固定字体大小，em就是没有意义的。一样，若是没有精确宽度来适应流行的屏幕尺寸，媒体查询也将是无心义的。

参考：http://www.w3cplus.com/responsive/responsive-web-design-fluid-layouts.html