弹性流体布局如何实现自适应多设备显示？

本文共计2484个文字，预计阅读时间需要10分钟。

创新：极端高峰+转载请注意出处+时间：2009年5月10日 0:12:03+蓝色论坛讨论帖：http://bbs.blueidea.com/thread-2927057-1-1.+在我的另一篇文章《弹性+刚度布局》中，我介绍了弹性加最小固定宽度的概念。

---

原创：冰极峰 转载请注明出处 时间：2009年5月10日 0:12:03

---

蓝色论坛讨论贴：bbs.blueidea.com/thread-2927057-1-1.html

在我的另一篇文章《弹性+固宽布局》中，我介绍了弹性加最小固定宽度的一种布局方案，现在介绍另一种布局方案---弹性流体布局。

那种方案其实就是这种布局的变通应用。弹性布局最大的优点就是能充分利用屏幕空间。无论客户端分辩率多大，都能自动适应宽度的变化。

图一

看看上面这幅图片，这是国外的一个网站，它本身是固定宽度布局的，我们的布局就以这幅图为基础来讲解的。当然，我不会全面介绍如何制作这个完整页面，我只针对重点做一下讲解。

其实做一个弹性布局，相对来说是比较简单的，但是这种布局虽简单，可是对于细节上的把握才是这种布局的精髓。弹性布局虽说有这么好的优点，可是却有比较致命的缺陷：

1. 如果不对这种布局设置一个最小宽度，当用户缩小窗口到足够小时，会对布局产生致命的影响。造成严重影响布局错位。

2. 当一个页面弹性布局时，对于里面的图片会产生巨大的影响。因为到目前为至，还没有解决图片随百分比缩放的问题。

所以这篇文章对于布局的讲解可能还相对少些，而更多的是解决上面的两个问题，我相信只要解决了上面的两个问题，这种布局相对来说就容易多了。