响应式网页设计基础也是重点：灵活性(2)

　　目标宽度÷上下文宽度=结果(比例宽度)

　　这个公式用子元素的像素宽度(目标宽度)除以它父元素的像素宽度(上下文宽度)，得到的结果就是这个子元素的比例宽度。

　　图1 实例：目标宽度(300px)和上下文宽度(960)像素

　　在图1中,例如,深灰色区域宽度为300px，包含在宽度为960px的浅灰色区域中.这里,960像素区域是上下文元素,300像素区域是目标元素,所以我们的数学公式是: 300 ÷ 960 = 0.3125

　　0.3125这个结果需要变成浏览器可识别的数值, 因此需要转化成一个比例值, 将小数点右移两位，变成31.25% 即可。然后在CSS中,将元素的宽度设定为这个比例值:

　　aside{ background-color:#ccc; float:left; width:31.25%; }

　　测试一下

　　公式虽然看起来很简单，但我知道必须在实际的网站中检验一下才行。幸运的是，我最近加入了EE播客，正在重新设计那个网站。当我的搭档给我她的 PS 设计文件时，我就决定将它打造成灵活布局的网站。

　　比例宽度

　　我首先记录下所有元素的像素宽度。(在排版设计事，我们没有严格遵循网格布局，这也是我建议的做法)正如你在图2中看到的。整体宽度为940像素，Logo，主持人介绍和分享链接都有它们各自的像素宽度。

　　图2 主页和顶部导航元素的像素宽度

　　按照 Ethan 的公式，整体宽度940px就是我的上下文宽度，根据它就可以确定所有元素的比例宽度.

　　Logo: 240 ÷ 940 = .255319148

　　主持人介绍: 436 ÷ 940 = .463829787

　　分享链接: 90 ÷ 940 = .09574468

　　随后我将这些浮点值转换成百分比值，运用到我的CSS中：

　　#logo a{ width:25.5319148%;/*240px/940px*/ } #hosts{ width:46.3829787%;/*436px/940px*/ } #push{