转: 自适应css布局—-流动布局新时代(译文)

流动网页设计有很多好处，但也只有在正确使用的时候。合适的技巧会使页面在大屏幕、小屏幕抑、ＰＤＡ小屏幕上都能得到良好的呈现。但是，糟糕的代码结构，对于流动布局来说将是灾难性的。因此，我们需要针对大多数流动设计的缺点寻求可行的解决方案。

如果你作为设计师通过额外的付出创造了一个功能性流动布局，为什么不更进一步使其兼容所有分辨率，而不是局限于大多数屏幕。你可以使用一些技巧创造一种意想不到的适应性布局，这种布局在不断改变屏幕分辨率情况下会保持功能上的完整性。

在这篇文章，我们将讨论创造 100%功能自适应css布局 的行之有效的方法，并提供其他教程和实践的详细清单：

你也参考以前的文章：

1. 固定&流动&弹性布局：哪一个适合你？

   这篇文章讨论每一种布局类型的优点和缺点。其中的任何一个可以用来创造一个成功的网站布局，只要保持其可用性就行；

2. 灵活布局：未来的挑战

   讨论灵活布局在未来的挑战；

3. 屏幕分辨率和更好的用户体验

   介绍屏幕分辨率的问题，然后普通用户的个人脚本。

一、使用网格的流动布局

我们大多数人都听说过设计固定宽度网页的 960网格系统 ，使用960网格系统使得固定宽度的设计比流动布局更可取。但是，有一种方法可以创建一个基于网格的 弹性布局 。从技术上讲，弹性布局的代码结构不同于流动布局，但它为用户提供的几乎是相同的效果。

什么是流动布局？

流动网格是通过智能的使用div、百分比和简单的数学 计算来创建的。这种理念来自于Ethan Marcotte ，他认识到“em”比字体大小进步。我们在这重温这个基本概念，但要对该方法有一个全面而详细的了解，请参阅“流动网格”，这是一篇全面的关于建立基于网 格的弹性布局的教程。

其理念是使用相对尺寸、结合百分比和em，用简单的分割以找到相对应的像素宽度，而这些宽度是在固定宽度设计中使用的。

优点：

1. 这种方法使你拥有一个网格布局，这看起来可能仅固定一次宽度；
2. 用户可以使用预设的字体大小查看这个布局，并且保持其比例大小；
3. 布局样式跨浏览器兼容；
4. 一旦理解之后，流动设计中的大多数问题将容易修复。

如何让创建一个流动布局？

创建流动布局的第一步是创建一个首选的固定宽度的模拟，这样一来，设计师能看到其比例，然后使用神圣的比例、平衡和合适的间距技巧。

Fixed-width version of our final result

从上述简单的布局中，我们可以看到如何在css中规划代码。960px是我们的固定宽度，对于任何小于该尺寸的分辨率屏幕，我们将迫使水平滚动条出现。所有内容在一个880px的wrapper里，在左右两侧有40 px的margin，元素间有20px的间距。

在我们思考其可用性之前，一切安好。这种类型的布局可 能适合很多用户，但未必适合每一个人。因此，我们将其转换成流动布局，如果欲使这一布局在任何分辨率下保持其比例，我们必须将960px的宽度改为 100%，然后计算出与880px、640px、200px等值的百分比。

这需要一些理性思考，在我们模拟的固定宽度设计中，在960px的设计中，整个wrapper是880px，如果需要与其等价的百分比，我们所要做的是相除。800pixels 　/ 　960pixels = 0.91667

采用十进制，将其转换成百分比，得到的是91.6667%。因为当前 浏览器处理百分比的差异，它不会很明智的将所有小数位数应用到布局 之中，浏览器要么向上取，要么向下舍。因此，我们需要一个整数，既然它更接近于92%，我们就向上取，稍后因为额外间隙的存在，我们需要向下舍，这很容易做到。

      #wrapper {width: 92%;}
    

对于content和sidebar区域，我们如法炮制，但需保持正确的比例。因为这个区域在880px的wrapper内，我们需要找到相对于这个区域的百分比。

640 pixels ÷ 880 pixels = 0.727272 › 73%

220 pixels ÷ 880 pixels = 0.25 › 25%

      #content {width: 73%;}
#sidebar {width: 25% ;}
    

我们将实际内容区域的宽度降至72%，这样我们的布局就不会破坏。因为它位于导航栏的旁边，我们不希望它太宽。

在处理流动设计的比例时，这是一个非常简单的概念，也是更有效的处理方式。借助于这样的技巧，设计者没有理由说不能保持其比例，美观的布局被破坏。

关于margin

设计者可以用不同的方法处理margin，一种方法是计算margin的百分比（此例中为200px/880px）；另外一种是设置固定的margin，在我们的例子中，硬性大小为20px。

两种方法各有优劣，margin使用百分比，设计师承担者在大分辨率屏幕下margin太大的风险但能保持完好的比例。用固定的margin在比例的保持上有轻微的缺陷，但是，无论屏幕分辨率为多大，margin将维持不变。

二、自适应内容

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

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

自适应内容流动布局

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

The Man in Blue 曾使用过这样的技巧。

A layout for a screen resolution of 800 pixels and narrower

上面的例子有两个单独的样式：一个针对分辨率超过800px的屏幕；一个针对分辨率小于800px的屏幕。

这种技巧用不同风格的布局取更好的适应不同分辨率的屏幕。 Marc Van Den Dobblesteen’s layout example, Switchy McLayout 用这些样式提供了一个完美的例子。

优点

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

创建自适应内容流动布局

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

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

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

      <!-- Narrow style sheet -->
<!-- Default style sheet -->
<!-- Wide style sheet -->
<!-- Included JavaScript to switch style sheets -->
<script src="scripts/dynamiclayout.js" type="text/javascript"><!--mce:0--></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 。

三、 流动布局中的图像

在流动布局中开发者最关心的是处理图像和内容，它们需 要一定的宽度。大多数情况下，我们希望我们的图像尽可能的大，至少在太小时应防止任何令人尴尬的空白，在固定宽度的布局中，可手动调整，客服这些问题很容 易。但是，在流动布局中，图像区域的宽度是不断变化的，这些问题就在此出现了。

自动杂志版面设计

这个解决方案需要一些聪明的数学知识和PHP，在Harvey Kane 的 Automatic Magazine Layout 文章中有全面的解释（包括数学）和可下载的源代码。标题由图像在杂志中如何呈现来决定： 有条理且总是完美对齐 。当然，一本杂志版面的设计师都必须经过一定的过程来实现这种效果，包括调整和手动放置。

对我们来说，这一技巧可以实现我们的效果，下面是脚本实现这一效果的第一个例子。

正如你所看到的那样，非常漂亮。但是，如何使用流动布局使其更具可用性？Harvey Kane 给了我们必须使用的脚本。

      # include the class file
require_once('magazinelayout.class.php');
<strong># Define the width for the output area (pixels)
$width = 600;</strong>
# Define padding around each image; this *must* be included
#in your style sheet (pixels)
$padding = 3;
# Define your template for outputting images
# (Don't forget to escape the &)
$template = '<img src="image.php?size=[size]&file=[image]" alt="">';
# create a new instance of the class
$mag = new magazinelayout($width,$padding,$template);
# Add the images in any order
$mag->addImage( 'landscape1.jpg' );
$mag->addImage( 'portrait1.jpg' );
$mag->addImage( 'landscape2.jpg' );
# display the output
echo $mag->getHtml();
    

我们可以事先定义我们所希望的图像杂志的宽度。因此，如果我们找到浏览器的宽度，我们就可以决定我们布局图像的宽度，这很容易。因为我们已经学会了第二种技巧：自适应内容的流动布局。在他的脚本中，Kevin Hale使用了一个称之为 getBrowserWidth() 的方法，你可以在他的文章中更深入的了解该方法的代码。

如果我们用这种方法取代浏览器的宽度值，然后用这个值去寻找我们内容区域的像素宽度（不论图像放在那个区域）。比方说，我们希望将图像放到70%的内容区域中，利用简单的数学知识，我们只需要找到浏览器宽度值的70%就行。

      Pixel width = 内容区域百分比 x 　浏览器宽度
$width = 0.70 x getBrowserWidth();
    

这是很基本的数学知识，是流动布局中处理图像最基本的方法，调整PHP脚本自动寻找图像的像素值。这样，在一个流动布局中，你就能很好的处理图像或其余已经设置宽度的内容。

四、jQuery圬工

不去考虑不断改变屏幕分辨率时css中的存在的许多问题。倒有一个共同的问题是许多设计师更可能面临的－－多重内容盒子。当有许多浮动元素时，一些尴尬的空白会出现在高度变换的区域之间，下面是这方面的一个例子：

如果我们打算在一个固定宽度的布局中使用多个div，固定很容易：只需调整所有div在合适的位置就行，在流动设计中用这种方式处理多个divs似乎不可能。布局的每一次调整，在新的点上将出现不同数量的空白。

Extra whitespace caused by the layout colapsing into two columns

在较小分辨率下查看相同的布局，布局变成了两栏。但是，在这种情况下，我们得了不同的空白。任何设计师觉得这是一个尴尬的问题。通常情况下，因为没有可行方案解决此问题，这种布局被强行设置成固定宽度。

幸运的是，这个问题不是不可能解决，而是相当容易－－源于 David DeSandro’s jQuery Plugin: jQuery Masonry 提供的方法。

jQuery圬工是什么？

jQuery圬工是一个非常容易使用的插件，用David DeSandro 自己的话说：“将jQuery看作css浮动的对立面，浮动元素的排列是先横向后纵向，圬工排列是先纵向后横向，其结果是在高度变换元素的垂直方向上没有间隙，就像是一座石头强。”

如何使用jQuery masonry

在上面的例子中，所有盒子被放置在 ID为“item”的段落之中，“item”设置了30%的宽度，并向左浮动，所有这些放置在宽度为90%的# wrapper中，一旦段落的宽度达到#wrapper的宽度，无论是否有空白留下，它将新起一行。

下载 jQuery Masonry 插件，并对#wrapper应用masonry()方法，就很容易修复它。

      $('#wrapper').masonry();
    

下面两张图片显示了该插件的力量。第一个是在大分辨率屏幕上的布局情况，第二个是同样的布局，在小分辨率屏幕中查看，它折叠成了两栏。

该插件的一个bug和一个修复方法

使用该插件，如果用户缩放浏览器，你会注意到div层保持在原来的位置，但是刷新后，它有完好。但用户不知道需要书信去修复该问题。因此，按下面的方法改变html代码将很容易的修复该问题。

      <body onresize="window.location=window.location;">
    

      <ul class="column">
<li>
<div class="block">
Block 1
</div></li>
<li>
<div class="block">
Block 2
</div></li>
<li>
<div class="block">
Block 3
</div></li>
</ul>