UI笔记——CSS的布局
<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单位，但是使用相对值设置了“最小宽度”和“最大宽度”（考虑了视口的宽度，赋予用户将布局限制在一定缩放范围内的能力）。通过设置最大和最小宽度，文本缩放到一定程度的时候会停止变化。布局随着视口的变化而自动调整保留了适用性，同时也是弹性的，在窗口尺寸或者字体尺寸发生变化是，各列的宽度在自动变化。
布局总结
选择最适合布局的问题不会得到唯一的答案。限于使用环境、时间限制以及设计师的技能，每种布局都有特定的应用情况。
一些设计师为了在不同浏览器之间获得完美的一致，流式设计的支持者们却任务布局并不需要在不同平台下保持一致。
动态的分辨率切换技术将会非常有用，而且在将来扩展你的布局类型时会是不二的选择。索然构建自适应的布局需要耗费很多时间，但是由于能够处理或小或大的各种类型的分辨率，会帮助设计师为用户呈现最合适的效果。随着屏幕宽度的不断增加，使用所有这些技巧只是个时间问题。
?
