网站用户体验整合设计-体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞

体验css+div 之固定宽度布局、流体布局、弹性布局的优势对比＜流体布局＞

Post by 张美工, 2008-10-14, Views:

　　在使用流体布局时，尺寸是用百分数而不是像素设置的。这使流体布局能够相对于浏览器窗口进行伸缩。随着浏览器窗口变大，列变宽。相反，随着窗口变小，列的宽度减小。流体布局可以非常高效地使用空间，最好的流体布局甚至不会引起用户的注意。
　　但是，流体布局也不是没有问题的：在窗口宽度小的时候，行变得非常窄，阅读。在多列布局中尤其如此。因此，有必要添加以像素或em为单位的min-width，从而防止布局变得太窄。与之相反，如果设计跨浏览器窗口的整个宽度，那么行就变得太长，也很阅读。
　　可以采取几个措施来避免这个问题：
　　１．首先，不要跨越整个宽度，而是让容器只跨越宽度的一个百分比，比如85%。
　　２．还可以考虑用百分数设置填充和空白边。这样的话，填充和空白边的宽度将随着窗口尺寸而变，防止列太快地变得过宽。
　　３．最后，对于非常严重的情况，也可以选择以像素设置容器的最大宽度，以防止内容在大显示器上变得极宽。

    　可以使用这些技术将前面的固定宽度的三列布局转换为流体三列布局。
　　１．首先，将容器设计比较好的效果。接下来，将导航和内容区域的宽度设置为容器宽度的百分数。经过几次尝试之后发现，将导航区域设置为23%、将内容区域设置为75%会产生比较好的效果。这在导航和内容区域之间留出2%的视觉隔离带，这可以防止任何舍入错误和宽度差错破坏布局：
#wrapper{width:85%;}
#mainNav{width:23%;
         float:left;
        }
#content{
         width:75%;
         float:right;
         }
　　２．然后需要设置内容区域中列的宽度。这需要点儿技巧，因为内容div的宽度基于内容元素的宽度，而不是整个容器在。如果希望secondaryContent的宽度与主导航相同，那么需要计算出容器宽度的23%是内容区域宽度的百分之多少。将23（导航宽度)除以75（内容区域的宽度），再乘以100，结果是大约31%。希望两个内容之间的隔离带宽度与导航和内容区域之间的隔离带相同。使用同样的方法计算出大约3%，这意味着主内容区域的宽度应该是66%：
　　这产生一个最适合1024*768分辨率的流体布局，但是在更大和更小的屏幕分辨率上阅读起来也比较舒服
#mainContent{width:66%;
            　　　 float:left;
　　　　　　}
#secondaryContent{width:31%;
                  　　　　float:right;
　　　　　　　　　}
　　因为这个布局会恰当地伸缩，所以不需要添加max-width属性。但是，对于小尺寸，内容会太窄，所以可以在容器元素上设置最小宽度为720像素。
接下来我们就来看弹性布局的详细内容和功能优势：