自适应css布局——流动布局新时代[译]（3）

二、自适应内容

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

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

自适应内容流动布局

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

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

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

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

优点

1. 设计者可以更精确的看到，在不同分辨率屏幕下，其设计是什么样子；

2. 无论是在什么平台上查看，其更好的遵守了间距和平衡的设计原则；

3. 完美的处理了最小和最大分辨率。