我想大多数web前端的设计师架构师们都有遇到流体布局，自动调整宽度设计的问题（我想大多只要从事2年以上的都遇到过），现在我就来讲一下我经常使用的招数，供大家讨论，如果有更好的招数，请大家一定不要吝啬。代码贴出来，大家共同研究（很多出色设计师都出自国外，为什么？就是因为人家喜欢探索，取其精华去其糟泊，大家挤出来的都是精华）。
在利用流体布局的优势的同时，一定要解决这些布局给你带来的问题，因为它的宽度是可变的，很多不确定因素困扰我们。例如过大的宽度会导致很长的行，造成阅读的不方便，从而影响用户体验，同样如果过窄的话容易出现文档流的重叠。
为了解决这个问题我看过一本书是Andy Budd写的一篇文章好像书名叫什么“站在巨人的肩膀上”还是什么？我忘记了，在图书馆中看到的，反正这本书上有这句话给我印象比较深。他写的大致意思是，使用max-width和min-width，这个元素，来构成流体布局后来发现在IE6中不能实现，因为IE6及一下版本对这个不支持。其他的我不记得了，后来我才慢慢在网上浏览找到了一个完整的解决方法。
解决之前我们先来实现以下：
1 #container, #footer 2 { 3 min-width:740px; /*最小尺寸不能小于740px*/ 4 max-width:1200px; /*最大尺寸不超过1200px*/ 5 }
因为760像素的是固定宽度布局的宽度值，考虑到主题中的10像素空白边，这里使用740像素（因为两边都需要空出来10像素的空白）。这定义了布局最小宽度。最大宽度设置为1200像素，这种布局在1280像素的屏幕能得到完整的扩展，就像我们现在用的博客园的博客模版，我想应该用的就是这种流体布局。IE6有问题，聪明的你发现了这个问题，那么我们怎么把它给解决了呢？对于这个问题我们来这样解决：
1 #container, #footer 2 { 3 width:expression(document.body.clientwidth<740? "740px" : 4 document.body.clientwidth>1200? "1200px" :auto ); 5 }
这个表达的意思是如果页面内容宽度小于740px的话这个样式起到的作用是就页面会达到740像素刚刚好。如果页面内容宽度大于1200像素的话，那么这个样式起到的作用就是将宽度强制设置为1200像素，不会超过。
这个专有的属性会使其他的css失效，所以我们另外想办法解决，有了，我们可以把这个专有的属性放到一个专用的文件里面：ie6.css，这样我们引用两个css就可以了，现在大功告成，你可以实验一下，这个问题得到了完美的解决。
如果大家还有更好的招数，贴出来，大家都好好研究研究。
（喜欢学习的和想与我探讨知识的留下你的邮箱或联系方式，或者跟我发邮件，[email protected].转载请自觉附上转载地址，来自博客园“卢瑟的web”)
最新评论