自适应流体布局

自适应内容

该流动设计另外一个常见问题是：尽管它们适应很多分辨率的屏幕，但如果分辨率太小（如手机或PDA）或超大，看上去就有点滑稽了。在分辨率为240的PDA屏幕上一个三栏布局看起来非常混乱。

为了解决这个问题，我们可以使用一项技巧使内容自适应特定范围的分辨率屏幕。幸运的是，我们可以利用上面的技术来保持我们的比例，然后增加该项技术以得到更好的可用性。

自适应内容流动布局

大多数流动布局在分辨率为800×600的屏幕中看起来很大很宽－－高达1280px。但是，我们可以稍稍突破一下，针对 800px－1024px、1024px－1280px、1280px以上的屏幕定制略微不同的布局。同样，也可为640px－800px、 320px－640px、240px－320px、240px以下的屏幕自定义调整。

一个针对分辨率超过800px的屏幕；一个针对分辨率小于800px的屏幕。 这种技巧用不同风格的布局取更好的适应不同分辨率的屏幕

优点

1. 设计者可以更精确的看到，在不同分辨率屏幕下，其设计是什么样子；
2. 无论是在什么平台上查看，其更好的遵守了间距和平衡的设计原则；
3. 完美的处理了最小和最大分辨率。

第一步是创建一系列可替代的布局文件。例如，一个称之为narrow.css，其针对小分辨率的屏幕。另一个可称之为normal.css，适应于传统的分辨率屏幕，第三可称之为wide.css，将处理较大分辨率的屏幕。

我们可以使用js根据预设的样式表作简单的改动，Dynamic Resolution Dependent Layouts 在演示页中使用js解释了如何使用它，于其它类型布局一样，所有样式和js文件都放在头部。

以下是代码片段：
<!-- Narrow style sheet -->
<link rel="alternate stylesheet" type="text/css" href="css/narrow.css"
title="narrow"/>
<!-- Default style sheet -->
<link rel="stylesheet" type="text/css" href="css/normal.css" title="default"/>
<!-- Wide style sheet -->
<link rel="alternate stylesheet" type="text/css" href="css/wide.css"
title="wide"/>
<!-- Included JavaScript to switch style sheets -->
<script src="scripts/dynamiclayout.js" type="text/javascript"></script>

注意到所有三个链接样式单的title属性：“narrow”、“default”、“wide”，在js源文件中查看DynamicLayout() 函数。可以看到，我们会很容易的根据每个title属性来调用相应的样式，以及如何改变相应的宽度。

以下是代码片段：
function dynamicLayout(){
    var browserWidth = getBrowserWidth();
    // Narrow CSS rules
    if (browserWidth < 640){
        changeLayout("narrow");
    }
    // Normal (default) CSS rules
    if ((browserWidth >= 640) && (browserWidth <= 960)){
        changeLayout("default");
    }
    // Wide CSS rules
    if (browserWidth > 960){
        changeLayout("wide");
    }
}

这种技术很容易实现，能够与其它技术一起创建更多的可用性布局。仔细查看js，可以看到更多细节。

详细见：http://www.bobd.cn/design/web/htmlcss/200908/33991_8.html