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

　　我没有对这些百分比值进行四舍五入，而是直接运用在CSS中。我也从来没有遇到过任何浏览器对这样精度的百分比值识别错误的情况(包括IE)。

　　同时，我为每一个百分比值都注释了计算它所用到的目标宽度和上下文宽度，这对于今后的开发来说是非常重要的参考。

　　确保你的上下文宽度是正确的

　　只要你的数学计算是正确的,那么将宽度值转化为比例值的过程就是很简单的,或者,更具体地说,只要你的上下文宽度是对的，那么你得到的比例值也就是正确的.

　　实战中, 我通过计算得到的比例值很少会出错，除非我将上下文宽度搞错了。

　　像图3中标示,主持人信息是一个包含, , 等元素的定义列表，这些元素的宽度值各不相同.

　　图3

　　刚开始计算的时候,我先用960像素作为我的上下文宽度,因此的宽度比例为: 116 ÷ 960 = .120833333

　　但是这个比例值(12.0833333%)不是我要的正确尺寸.直到我意识到我的上下文宽度是不同的,我才得到了正确的比例值.

　　但是这个比例值(12.0833333%)不是我要的正确尺寸.直到我意识到我的上下文宽度是不同的,我才得到了正确的比例值.

　　对于来说，它的上下文元素实际是它的父元素，宽度为436像素。因此我改变了一下参数，并计算出了我需要的百分比： 116 ÷ 436 = .266055045

　　如果你计算的比例宽度有任何问题，请先检查一下选定的上下文宽度是否正确，这会帮你省不少事。

　　成比例的字号

　　我将ee-podcast.com变得更加“灵活”的第二步是使用比例字号，它和比例宽度的道理是相同的：将固定的像素值变成比例值，字体的比例值使用em进行计算.

　　要计算比例em，使用相同的公式(目标宽度 ÷上下文宽度 = 结果)即可,字体的上下文宽度就是它基本字号，通常在body元素中定义：

　　body { font: 100%/1.5 "Open Sans",Arial,Helvetica,sans-serif; }

　　大多现代浏览器的基本字号是16px，如