響應式網(wǎng)頁設計基礎也是重點：靈活性(4)

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

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

　　成比例的padding和margin

　　對于padding和margin來說,那個神奇公式同樣有效. 讓我們考慮一下主持人信息當中，右margin被設定為20像素的

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

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

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

　　對于padding的計算來說也是一樣。

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

　　ee-podcast.com的主區(qū)域(如圖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頁響應式網(wǎng)頁設計基礎也是重點：靈活性

　　特例

　　這個公式對于橫向padding比例寬度的計算有一個特例：對于padding而言，上下文元素永遠都是這個元素本身，無論父元素的寬度是多少。

　　例如圖5所示的分享鏈接,文字左側均有25像素的橫向padding來放圖標.

　　圖5 padding的上下文寬度

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

　　25 ÷ 90 = .277777777

　　因此p