響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)也是重點(diǎn)：靈活性(4)

　　現(xiàn)在，我們來(lái)考慮一下主持人名字的字號(hào)，在版式設(shè)計(jì)時(shí)設(shè)定的是12px，使用公式12÷16=.75就得到了它的em值。這個(gè)浮點(diǎn)數(shù)不用轉(zhuǎn)換成百分比值就能直接在CSS中使用：

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

　　成比例的padding和margin

　　對(duì)于padding和margin來(lái)說(shuō),那個(gè)神奇公式同樣有效. 讓我們考慮一下主持人信息當(dāng)中，右margin被設(shè)定為20像素的

　　元素(圖3).為了得到這個(gè)margin的比例值,我使用了和計(jì)算比例寬度相同的公式: 20 ÷ 436 = .04587159

　　將小數(shù)點(diǎn)右移兩位,得到的百分比值可用到CSS中：

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

　　對(duì)于padding的計(jì)算來(lái)說(shuō)也是一樣。

圖4 主區(qū)域的橫向padding

　　ee-podcast.com的主區(qū)域(如圖4所示)的寬度為940px，同時(shí)左右各有40px的橫向padding。我使用目標(biāo)寬度(40px)除以上下文寬度(940px)得到它們的比例寬度：

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

　　第2頁(yè)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)也是重點(diǎn)：靈活性

　　特例

　　這個(gè)公式對(duì)于橫向padding比例寬度的計(jì)算有一個(gè)特例：對(duì)于padding而言，上下文元素永遠(yuǎn)都是這個(gè)元素本身，無(wú)論父元素的寬度是多少。

　　例如圖5所示的分享鏈接,文字左側(cè)均有25像素的橫向padding來(lái)放圖標(biāo).

　　圖5 padding的上下文寬度

　　計(jì)算此padding的比例值時(shí),應(yīng)將這個(gè)元素本身的寬度(90px)作為上下文寬度，而不是父元素的寬度940px.(圖2)

　　25 ÷ 90 = .277777777

　　因此p