创造100% 自适应css布局的行之有效的方法

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

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

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

　　title="narrow"/>

　　title="wide"/>

　　注意到所有三个链接样式单的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

最新评论