位置：首页>> 网络编程>> 网页设计>> 自适应css布局——流动布局新时代[译]（2）

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

作者：dishuipiaoxiang　来源：蓝色理想　发布时间：2009-08-13 12:28:00　

标签：自适应,布局,css

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

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

从上述简单的布局中，我们可以看到如何在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％

width: 73％;
}
#sidebar {
width: 25％ ;
6.}

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

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

关于margin

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

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

投稿

猜你喜欢