UI笔记——CSS的布局

页面布局

固定宽度布局

所用的宽度往往由显示器的平均分辨率决定。当下，大多数用户都已经拥有了1024×768或更高分辨率的显示器，所以大多数设计师选择了使用960像素或者1050像素作为固定宽度布局的宽度。个宽度可以避免水平滚动条的出现，并且为多数浏览器中都会出现的20像素的垂直滚动条留下了充足的空间。但是，对于低分辨率的屏幕，我们需要多加注意，如果固定宽度布局的宽度过宽，还是会出现水平的滚动条。

固定宽度布局产生了过度的空白，扰乱了黄金比例、三分结构、总体平衡或者其他的设计原则。强烈推荐使用一个居中的DIV来维护固定宽设计中的平衡感。

#wrapper { margin: 0 auto; }

 自适应（流式布局）布局

这类布局中，布局元素之间的关系至关重要，因为布局中子元素的宽度是以父元素的百分比设置的（不是相邻元素）。

内容区过宽的结果是流式布局最显著的缺点。由于内容去的宽度决定于用户视窗的大小，宽屏的用户会发现每一行都是如此的长，以至于阅读起来很不舒服。如果一个使用流式布局的页面中没有这么多的文字，用户将看到孤零零的一行字，侧边栏高得非常不协调，周边还充斥着大量的空白。

为了获得最佳阅读效果（每行47到86个字母），设计师通常为内容区#content-block设置在此基础上加10%的宽度。除非设计的可读性会在低分辨率情况下变得很糟糕，一般不会设置最小宽度。

css中使用属性"max-wdith"，来定义布局的最大宽度

IE6的变通方案

#content{
    max-width:30em;
    width:expression(
        document.body.clientWidth > (500/12) * 
        parseInt(document.body.currentStyle.fontSize)?
        "30em":
        "auto");
}

 动态网格布局

网格秩序体现了秩序与精确。本质上，忘了允许使用对齐、对称、适当的空白，从战略和系统上来组织排版和设计元素。

一个经典的计算这个比例关系的方式，是通过将给定像素高度元素与容器的尺寸相除得到字体大小（即上下文）。最后，我们得到了期望的、使用相对值、类似em或者percentage的比例关系。这个公式就是：目标 ÷ 环境 = 结果。

把这种方法应用到布局中的所有元素上，我们将会得到一个稳定、灵活、自适应的网格布局，在流式设计中带来高效的处理比例平衡的方法。

每种方法都有其优点和缺点。使用相对的边距值，虽然能够达到较好地平衡比例，但是设计师就会承担在宽屏上边距过大的风险。固定边距虽然在边距上有一点不完美，却确保了在不同游览器尺寸情况下一致的外观。

自适应的流式布局

尽管流式设计可以适应很多种不同的分辨率，但是仍有一个通病，在分辨率太低或者太高的情况下，界面看起来就有点可笑。

要建立自适应的流式布局，需要准备两件事：为每种范围的分辨率准备的分离的样式文件和一种获取用户屏幕分辨率的方法。

我们可以向网页中添加基于JavaScript的字体缩放。在页面中插入下面代码，根据情况进行适当修改。

<script type="text/javascript">
    var contentZoom = new TextZoom(
    "Content",  //Reference element
    "Content",  //Target element
    0.22,  //Zoom ratio
    70,  //Minimum font size (%)
    130);  //Maximun font size (%)
    addLoadEvent(textZoomInit);
</script>

弹性（可缩放）布局

这种布局的基本思想是根据用户的字体大小而不是浏览器视口大小来调整网页布局的宽度。

像素是计算机屏幕上无法缩放的一个点，em则是字体的一个方形单位。根据用户对于字体尺寸的选择，em单位经常发生变化（Elastic Design，alistapart.com）

通过为布局中的区块和字体使用em单位，设计师能够实现网页布局的整体缩放，保持内容每行的宽度适中，实现接近现实的缩放效果。最后，挡用户增加字体尺寸时，布局自动缩放，就像他们是一个有弹性的物体一样。

由于不依赖于浏览器视口的变化，弹性布局有点类似固定宽度布局，同时具备了它的优点和缺点。设置很大的字体尺寸会扩展布局的宽度和高度，最后布局变得无法使用和阅读。但是这种情况极少发生，因为很少有人会把字体放大3倍（特别是设计师已经使用了一个足够大的字体作为基准字体）。

像弹性布局一样，这中布局开始时最困难的一件事情就是计算合适的em值。为了简化从像素到em的转化，可以设置body中10像素的字体基准尺寸为0.623em或者62.5%（多数浏览器中字体的尺寸是16像素，10像素是16像素的62.5%），这样在计算字体的子元素时候跟容易些。

多元素的存在增加了弹性布局的复杂性，因为在字体的尺寸发生变化时，需要维护布局中所有元素的比例关系。

关于弹性布局或者基于字体尺寸设置宽度的布局，人们还非常关系如何展示多媒体内容，诸如图片和Flash对象。

因此，多数设计师经常为图片使用绝对为值。

弹性布局的最大优点就是具备始终保持设计元素比例关系的能力，以及确保可读性和定位的准确。弹性布局是那些希望在流式布局和固定宽度布局之间妥协的设计师的首选。流式布局和固定宽度布局的优点在弹性布局中都有所体现。但是，这种布局实现起来非常困难，在完成之前需要大量的深入理解和测试。

全页面缩放对满足不同用户需求有所帮助，但是却不是开发人员的终极解决方案。

比如，布局允许用户只缩放固定的区域或者元素，这在浏览器缩放中是无法实现的。

混合布局

现实中，设计师通常混合使用固定宽度，流式布局或者弹性布局元素，为用户提供每种方式的优点，并且将缺点降低到最小。

Jello-liquid布局(不是很流行)：为了保持内容区的可读性，他努力降低布局增长时比例增长的速度。

固定部分占布局的比例越小，布局随着视口拉伸时所获得效果就越好。很简单、也很聪明。

结合了流式和弹性元素的流式弹性布局（fluid elastic layout）：这种布局基于em单位，但是使用相对值设置了“最小宽度”和“最大宽度”（考虑了视口的宽度，赋予用户将布局限制在一定缩放范围内的能力）。通过设置最大和最小宽度，文本缩放到一定程度的时候会停止变化。布局随着视口的变化而自动调整保留了适用性，同时也是弹性的，在窗口尺寸或者字体尺寸发生变化是，各列的宽度在自动变化。

布局总结

选择最适合布局的问题不会得到唯一的答案。限于使用环境、时间限制以及设计师的技能，每种布局都有特定的应用情况。

一些设计师为了在不同浏览器之间获得完美的一致，流式设计的支持者们却任务布局并不需要在不同平台下保持一致。

动态的分辨率切换技术将会非常有用，而且在将来扩展你的布局类型时会是不二的选择。索然构建自适应的布局需要耗费很多时间，但是由于能够处理或小或大的各种类型的分辨率，会帮助设计师为用户呈现最合适的效果。随着屏幕宽度的不断增加，使用所有这些技巧只是个时间问题。