自适应css布局——流动布局新时代

创建自适应内容流动布局

创建这种类型的布局，我们要做两件事：为每一范围分辨率的屏幕设立单独的样式；第二是确定用户屏幕的分辨率。对此，Kevin Hale 在文章 Dynamic Resolution-Dependent Layout Technique 中作过详细的介绍。

第一步是创建一系列可替代的布局文件。例如，一个称之为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，可以看到更多细节。

相似的技术

对于类似的技术，可以参阅 Brand Spanking New 的 Dynamic layouts with adaptive columns，他使用了大致相同的代码，但略微不同，幸好有更多的选择和脚本实例得到同样的自适应内容。

要下载此版本自适应内容的脚本，请到 Dynamic layouts with adaptive columns。

这种概念并不难，关于此技术每个开发者都有自己的脚本，Clagnut.com博客的回帖中有更多关于自适应内容的布局和脚本－－“Variable fixed width layout“，在其回帖中甚至有一种技巧无需任何脚本－－CSS Drop Column Layout