自适应css布局——流动布局新时代[译]（2）
作者：dishuipiaoxiang 来源：蓝色理想 发布时间：2009-08-13 12:28:00
如何让创建一个流动布局？
创建流动布局的第一步是创建一个首选的固定宽度的模拟，这样一来，设计师能看到其比例，然后使用神圣的比例、平衡和合适的间距技巧。
从上述简单的布局中，我们可以看到如何在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将维持不变。
0
投稿猜你喜欢
- CSS styles和HTML styles有什么区别？HTM style是指自定义HTML标识中一些标签，例如说在HTML中〈B〉〈/B〉
在使用数据库的时候,难免要在使用过程中进行删除的操作,如果是使用int类型的字段,令其自增长,这是个最简单的办法,但是后果会有些不是你想要的- 本文中介绍的主要是SQL语句，请大家不要在Access中使用。SQL的分类：DDL—数据定义语言(CREATE，ALTE
- 在SQL Server 2008 中，新的FILESTREAM 数据类型，允许像文件和图片这种大型的二进制数据可以直接在NTFS文件系统中进
- 在web开发中常常要使用js，为了提高效率一般都会制作js的类文件。这样在使用中更新复用都很方便。下面按照我工作中的一个案例，介绍如何定义j
- 需要写个js滑动展开折叠（收缩）的效果，搜索到无忧脚本的一篇贴子，稍加修改了下使其在FF也可应用，代码如下： <
- 有这样一类文章标题，喜欢学习的人肯定见过：使用Google的7个技巧Web设计中9个常见的可用性错误Adobe Photoshop 75个技
- MySQL4.1以前版本服务器只能使用单一字符集，从MySQL4.1版本开始，不仅服务器能够使用多种字符集，而且在服务器、数据库、数据表、数
- 一般的网站会有很多页面，面包屑导航可以大大改善用户寻找他们的路径的方法。就可用性而言，面包屑可以减少一个网站的用户返回上一级页面的操作次数，
- 原文地址：30 Days of Mootools 1.2 Tutorials - Day 2 - Selectors如果你还没有准备好，请先
- 一个Javascript 的类库，用于table内容排序。使用很方便，不用每次都去调用数据库了。特别适合多表查询的排序。加上<tbod
- 阅读上一篇：W3C优质网页小贴士（二） 注意字体大小网页设计者中有这么一种倾向：他们认为小字体能让网页看起来更漂亮，并能提供更多空间给每个网
- 在网站的一些应用中需要提供用户直接打印页面的功能，最明显的就是电子优惠券，商家根据网站提供的模板输入内容，然后生成优惠券页面，用户打印这个页
- 1.having 子句的用法 having 子句对 group by 子句所确定的行组进行控制,having 子句条件中只允许涉及常量,聚组
- SQL Server 2000安装问题集锦1、先把SQL Server卸载（卸载不掉也没有关系，继续下面的操作）2、把Microsoft S
- 当很多人发现在DW4中定义CSS很方便的时候，开始报怨FP2000不能定义CSS，甚至就此抨击FP2000如何的不好。事实上，在FP2000
- 这个是捕获键盘事件输入状态的js代码，它可以判断你敲打了键盘的那个键，ctrl、shift，26个字母等等，返回具体键盘值。Javascri
- 在微软的ASP编程体系中，ADO对象的建立，使得从网页访问数据库成为一件易事，特别是ADO的Recordset对象使得控制数据的输出显示更为
- 1.怎么样查看数据库字符集 [A]数据库服务器字符集select * from nls_database_parameters，其来源于pr
- 有朋友问,在数据库中如何查询数据所在的行,一般我们建议一个自增字段就可以了.但是有时却会删除数据,那么那个自增字段也不正确了先不管朋友们为什
