自适应的流式布局

尽管流式设计可以适应很多种不同的分辨率，但仍有一个通病，就是在分辨率太低（比如手机或者PDA设备）或者太高的情况下，界面看起来有点可笑。例如，一个三栏布局的页面在只有240 px的PDA屏幕中看起来就会非常糟糕。另外，如果设置了“最小宽度”，布局中可能会包含一个水平的滚动条，这让阅读变得很不流畅。

为了解决这个问题，可以使用一项技术来改善不同屏幕分辨率情况下的内容自适应问题，这也就是“适应性流式布局”名称的由来。接下来，将创建在640~800 px、320~640 px、240~320 px以及240 px以下分辨率情况下，只是稍有不同的定制布局。同样，定制的调整也能够分别用在800 ~1 024 px、1 024~1 280 px，甚至1 280 px以上的情况。

这样做的好处是显而易见的，设计师在能够切换不同布局分辨率的同时又保持了布局的准确性。无论是最低分辨率还是最高分辨率，都能够很好地处理；同时，保留了空间平衡的设计准则，而不用担心用户使用何种浏览器。

要建立这种类型的布局，需要准备两件事：为每种范围的分辨率准备分离的样式文件和一种获取用户屏幕分辨率的方法。第一件事情就是创建一系列可替换的布局文件。例如，一个文件命名为 narrow.css，在非常低的分辨率情况下使用。另外一个文件命名为 normal.css，在普通的分辨率情况下使用。第三个文件命名为wide. css，专门应付那些高分辨率的情况。

有了这些样式文件，就可以使用Java Script来做一些简单的替换。例如，使用凯文·哈尔的“动态布局技术（Dynamic Resolution-Dependent Layout Technique）”或者马克·范登巴博斯汀的自适应布局方法“Switchy Mc Layout”。所有样式文件的声明和Java Script 脚本放在所有页面文件的头部。

＜!-- 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 Java Script to switch style sheets --＞

＜script src="scripts/dynamiclayout.js" type="text/

javascript"＞＜/script＞

注意，在“narrow”“default”和“wide”这3个外部样式文件链接中的属性。认真看一下源码中Dynamic Layout（）函数就能发现，可以很容易地根据样式表链接的属性进行样式文件的切换。下面来看看具体的例子。

function dynamic Layout(){

var browser Width = get Browser Width();

// Narrow CSS rules

if (browser Width ＜ 640)

change Layout("narrow")

}

// Normal (default) CSS rules

if ((browser Width ＞= 640) ＆＆ (browser Width ＜= 960))}

change Layout("default");

}

// Wide CSS rules

if (browser Width ＞ 960){

change Layout("wide");

}

}

注意，因为适应性的流式布局依赖Java Script，所以需要客户端支持Java Script，这样脚本才能探测用户浏览器的分辨率，并且进行相应的切换（图4.8）。

图4.8

图4.8是Switchy Mc Layout 布局在不同浏览器尺寸下的示例。根据浏览器的尺寸，布局进行了自动的调整。

“支持变量的固定宽度布局”（Variable fixed-width layout）是由理查德·鲁特开发的，基于西蒙·柯立森布局的相似技术。屏幕尺寸发生变化时，布局和字体也相应地变化。布局尺寸实时地发生变化，所以如果调整了浏览器的尺寸，布局会随之变化以适应新尺寸（图4.9）。

理查德·鲁特的基于变量的固定宽度布局使用Java Script来自动缩放布局和字体。在1 280 px分辨率下，是四栏布局；但是在850 px下，布局自动调整为三栏，第四栏移动到了所有栏目的下方。

就像之前提到的那样，流式布局的一个普遍问题是文本要么变得很长，要么被挤到一团，导致布局的可读性很差。在窄屏幕中，文本之间过大的空白是最大的问题，当然相反的极端情况也同样让用户很头疼。可以使用最大宽度和最小宽度来解决这个问题，但如果这样，布局就被转换为宽度部分固定的布局，丧失了总体的灵活性。文本缩放技术基于Java Script，根据用户浏览器的宽度自动调整文本的尺寸。当屏幕变宽时，字体就变大；相反，屏幕变窄时，字体就变小。另外，可以设置最大和最小的字体尺寸，防止奇怪的情况发生。更进一步，设计师甚至可以决定哪些元素受到文本缩放的影响，哪些元素免受影响。

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

图4.9

＜script type="text/javascript"＞

var content Zoom = new Text Zoom(

"Content", // Reference element

"Content", // Target element

0.22, // Zoom ratio

70, // Minimum font size (%)

130);// Maximum font size (%)

add Load Event(text Zoom Init);

＜/script＞

字体缩放技术：图4.10是一个具有最大尺寸的页面，显示较大的字体。

图4.10

字体缩放技术：和图4.10一样的页面，宽度调整为700 px。字体随着浏览器变化进行了调整。请注意导航菜单中的字体并没有发生变化（图4.11）。

图4.11

为了获得最好的浏览体验，可以通过脚本来修改DIV的宽度，同时根据浏览器当前的尺寸决定显示列数的多少（根据浏览器尺寸的变化）。使用JQuery脚本清除所有列的多余空白，然后平均分配给现有的列。这项技术是自适应流式布局的一个好例子，特别适用于那些自己调整浏览器尺寸的用户。