Question

在可预见的未来，你看到的和制作的网页都还会使用固定尺寸。当前，我们通常是在Photoshop、Fireworks等软件制作的设计图中（基于像素单位）度量元素的大小、外边距，然后将这些尺寸直接写进CSS代码中。文字大小也是这样设置的。我们在图片编辑软件中点击一下文字对象，查看其具体尺寸（一般单位是像素），然后将其写入对应的CSS代码。那我们如何将固定尺寸转换为相对尺寸呢？

3.3.1　需要牢记的公式

作为伊桑·马科特的粉丝，我对他的崇拜可能有点太过了。但此处我有必要再给他行一次三跪九叩之礼。在丹·锡德霍姆（Dan Cederholm）编写的《无懈可击的Web设计》 一书中，伊桑·马科特为其撰写了一章关于流动布局的内容。在书中，他提供了一个简易可行的公式，将固定像素宽度转换对应的百分比宽度：

目标元素宽度÷上下文元素宽度＝百分比宽度

看起来有点像方程式？不要害怕，在创建响应式设计的过程中，这个公式很快会成为你的得力助手。不再赘述理论，接下来我们使用该公式将 And the winner isn’t...网站从固定尺寸转换成百分比布局。

如果你还记得，我们在第2章学习使用媒体查询来支持不同视口时，所编写的页面基本标签结构应该是这样的：

页面内容稍后添加，但我们要重点关注的是此处用来设置页面主要结构模块（头部、导航、侧边栏、内容区以及页脚）宽度的CSS。请注意，下面的代码中我省去了很多样式，以便将注意力集中在页面结构上：

上面代码中所有的尺寸值都是像素值。我们从最外层的元素开始，使用“目标元素宽度÷上下文元素宽度＝百分比宽度”这个公式将它们改成百分比宽度。

当前所有的页面内容都被包裹在一个ID为#wrapper的div中。在上面所示的CSS中可见，这个div被设置为外边距自适应，宽度960像素。作为最外层的div，我们该把它的宽度定义为相对视口宽度的百分之多少呢？

3.3.2　设置百分比元素的上下文

我们需要一些“hold”场面的元素，让它们作为网页中百分比宽度元素（内容区、侧边栏、页脚）的上下文。我们要为这些元素的宽度设置一个百分比值，而#wrapper元素的宽度应该是相对于视口尺寸而言的。现在我们从头来过，将其宽度设置为96%看看效果如何。#wrapper元素修改后的样式如下：

修改后的效果如下图所示：

看起来还不错！96%的宽度刚刚好，不过也可以选择100%或者90%——这取决于我们的感觉，保证网页在视口内有最美观的视觉效果即可。

将里层元素从固定宽度改为百分比宽度稍微有点复杂。我们先来看看头部。再复习一下公式：目标元素宽度÷上下文元素宽度＝百分比宽度。#header（目标元素）被包裹在#wrapper（上下文元素）中。因此，我们用#header的宽度940像素，来除以上下文元素（#wrapper）的宽度960像素，结果是0.979166667。将小数点向右移动两位转换为百分比值，我们就得到了头部的百分比宽度，即97.9166667。将结果设置到CSS中：

#navigation和#footer的宽度也是基于像素的，我们使用相同的方法将它们转换为百分比。

最后在浏览器中查看效果之前，我们来说说#content和#sidebar。上下文宽度还是960像素，那我们只需要用目标元素宽度来除这个数字即可。#content的宽度是698像素，除以960结果是0.727083333。移动小数点后结果是72.7083333%——这就是#content的百分比宽度。侧边栏的宽度是220像素，但它有2像素宽的边框。我不想让右侧边框的宽度随着上下文变宽或是变窄，而是始终保持在2像素。所以需要将侧边栏的宽度减去一点。我将本例中的侧边栏宽度减去2像素，然后套用之前的公式，即目标元素宽度（218像素）除以上下文元素宽度（960像素），结果是0.227083333。移动小数点后，侧边栏的百分比宽度是22.7083333%。再将所有像素宽度修改为百分比宽度，最终的CSS代码如下所示：

下图展示了当前页面在视口宽度约为1000像素的Firefox浏览器中的效果：

目前看来效果很不错。接下来我们继续使用“目标元素宽度÷上下文元素宽度＝百分比宽度”这个公式，将页面各处10像素的内边距、外边距也替换成等价的百分比值。所有这些间距都基于960像素的上下文，所以替换成对应的百分比值就是1.0416667%（10÷960）。

这些数字能四舍五入吗？

一些响应式设计技术的批评者（如这篇文章：http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one/）认为在样式表中输入诸如.550724638这样的数字很愚蠢。你可能也会疑惑，为什么不将这些小数四舍五入？但支持者们认为，这样做可以提供更加精确的结果。为浏览器提供更加精确的结果可以使其显示效果更加精准。顺便说一下，学过数学的人都应该知道黄金分割率（http://en.wikipedia.org/wiki/Golden_ratio）。黄金分割率是一个很早就被发现且广泛应用于各学科的数学比例，其比值大约为1：1.61803398874989（如果你想知道保留10000位小数的黄金分割数，请访问这里：http://www.maths.surrey.ac.uk/hosted-sites/R.Knott/Fibonacci/phi10000dps.txt）。怎么看它都不是一个简洁的数字，但是它非常重要。黄金分割率的测量都能做到如此精确，那我相信网页设计同样做得到。

在如前所述的视口中，页面元素表现良好。但是导航区域不太理想。如果将视口尺寸缩小一点，只要一丁点，导航链接就会变成两行：

此外，如果将视口放大，导航链接之间的间距并不会相应地增加。我们来看看与导航关联的CSS代码并试着找出问题的原因：

一眼看上去，就发现好像上面的第三个样式规则#navigation ul li a，还有25px这样的基于像素单位的外边距。让我们用久经考验的公式来修正这个问题。导航区域的宽度是940像素，所以换算结果是2.6595745%。对该样式的修改如下：

够简单吧！我们到浏览器中看看是否万事如意……

哎，等等，这不是我们想要的效果。导航链接没再折成两行，但很明显导航链接之间的间距不对。导航链接看上去像一个字典里查不到的长单词……

3.3.3　必须时刻牢记上下文

再想想我们的公式（目标元素宽度÷上下文元素宽度＝百分比宽度），你就会知道前述问题的症结所在——上下文元素。相关的标签结构如下：

可以看到<a href＝"#">链接被包裹在各自对应的<li>标签中。它们才是我们要找的外边距的上下文元素。看看<li>标签对应的CSS代码，会发现没有为其设置宽度：

这种情况很常见，不过我们有很多方法解决这个问题。我们可以给<li>标签设置一个明确的宽度值，这个值必须得是一个固定像素宽度或者是一个相对于其包裹元素（#navigation div）的百分比值，但这两种值都无法保证<li>中的文字灵活可变。

此外我们可以修改<li>现在的CSS代码，将inline-block改为inline：

使用display： inline；（这样可以阻止<li>元素渲染为块级元素）还可以使导航在不支持inline-block的老版本Internet Explorer（版本6和7）中水平显示。不过，我是inline-block的粉丝，因为它允许我们在现代浏览器中有效的控制外边距和内边距，所以我会让<li>标签继续保持inline-blocks状态（一会可以给IE6和IE7追加一个覆写样式），然后将（没有明确的上下文的）<a>标签上的百分比外间距挪到<li>上来。修改后的样式如下所示：

下图展示了在视口宽度1200像素的浏览中的显示效果。

导航区域的修改现在告一段落，但是导航链接在视口变小时仍然会折成两行，只有到了视口小于768像素时，第2章编写的媒体查询才能覆写当前的导航样式。在着手修正导航部分的问题之前，我准备先将文字大小从像素尺寸修改为相对单位em。完成这个工作之后，我们就会注意到另外一个被忽略的问题 ，即让图片随着页面的变化缩放。