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

　　现在，我们来考虑一下主持人名字的字号，在版式设计时设定的是12px，使用公式12÷16=.75就得到了它的em值。这个浮点数不用转换成百分比值就能直接在CSS中使用：

　　#hosts dd{ font-size:.75em;/*12px/16px*/ }

　　成比例的padding和margin

　　对于padding和margin来说,那个神奇公式同样有效. 让我们考虑一下主持人信息当中，右margin被设定为20像素的

　　元素(图3).为了得到这个margin的比例值,我使用了和计算比例宽度相同的公式: 20 ÷ 436 = .04587159

　　将小数点右移两位,得到的百分比值可用到CSS中：

　　#hosts dt{ /*20px/436px*/ width:26.6055045%;/*116px/436px*/ }

　　对于padding的计算来说也是一样。

图4 主区域的横向padding

　　ee-podcast.com的主区域(如图4所示)的宽度为940px，同时左右各有40px的横向padding。我使用目标宽度(40px)除以上下文宽度(940px)得到它们的比例宽度：

　　header,footer,.wrap { padding-right:4.25531%;/*40px/940px*/ padding-left:4.25531%;/*40px/940px*/ width:79.3%; }

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

　　特例

　　这个公式对于横向padding比例宽度的计算有一个特例：对于padding而言，上下文元素永远都是这个元素本身，无论父元素的宽度是多少。

　　例如图5所示的分享链接,文字左侧均有25像素的横向padding来放图标.

　　图5 padding的上下文宽度

　　计算此padding的比例值时,应将这个元素本身的宽度(90px)作为上下文宽度，而不是父元素的宽度940px.(图2)

　　25 ÷ 90 = .277777777

　　因此p