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

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

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

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

s，专门应付那些高分辨率的情况。

这样做的好处是显而易见的，设计师在能够切换不同布局分辨率的同时又保持了布局的准确。

有了这些样式文件，我们就可以使用JavaScript 来做一些简单的替换。例如，使用 Kevin Hale 的“ 动态布局技术（Dynamic Resolution-Dependent LayoutTechnique）”(particletree.com) 或者Marac Van Den Dobblesteen 的“SwitchyMcLayout”（alistapart.com）。所有样式文件的声明和JavaScript 脚本放在所有页面文件的头部。

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

“支持变量的固定宽度布局”（Variable fixed-width layout）是由Richard Rutter开发的，基于Simon Collison 布局的相似技术（在“Redesign Notes 1 ：Width-Based Layout”中进行过讨论，colly.com）。屏幕尺寸发生变化时，布局和字体也相应地变化。布局尺寸实时地发生变化，所以如果你调整了浏览器的尺寸，布局会随之变化以适应新尺寸。

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

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

在Soh Tanaka 的文章“Smart Columns with CSS and JQuery”（sohtanaka.com）中，作者提出了一种类似的技术。为了获得最好的浏览体验，通过脚本来修改DIV 的宽度，同时根据浏览器当前的尺寸决定显示列数的多少（根据浏览器尺寸的变化）。使用JQuery 脚本清除所有列的多余空白，然后平均分配给现有的列。这项技术是自适应流式布局的一个好例子，特别适用于那些对浏览器不是一视同仁，而是自己调整浏览器尺寸的用户。