響應式網頁設計基礎也是重點：靈活性(3)

　　我沒有對這些百分比值進行四舍五入，而是直接運用在CSS中。我也從來沒有遇到過任何瀏覽器對這樣精度的百分比值識別錯誤的情況(包括IE)。

　　同時，我為每一個百分比值都注釋了計算它所用到的目標寬度和上下文寬度，這對于今后的開發(fā)來說是非常重要的參考。

　　確保你的上下文寬度是正確的

　　只要你的數(shù)學計算是正確的,那么將寬度值轉化為比例值的過程就是很簡單的,或者,更具體地說,只要你的上下文寬度是對的，那么你得到的比例值也就是正確的.

　　實戰(zhàn)中, 我通過計算得到的比例值很少會出錯，除非我將上下文寬度搞錯了。

　　像圖3中標示,主持人信息是一個包含, , 等元素的定義列表，這些元素的寬度值各不相同.

　　圖3

　　剛開始計算的時候,我先用960像素作為我的上下文寬度,因此的寬度比例為: 116 ÷ 960 = .120833333

　　但是這個比例值(12.0833333%)不是我要的正確尺寸.直到我意識到我的上下文寬度是不同的,我才得到了正確的比例值.

　　但是這個比例值(12.0833333%)不是我要的正確尺寸.直到我意識到我的上下文寬度是不同的,我才得到了正確的比例值.

　　對于來說，它的上下文元素實際是它的父元素，寬度為436像素。因此我改變了一下參數(shù)，并計算出了我需要的百分比： 116 ÷ 436 = .266055045

　　如果你計算的比例寬度有任何問題，請先檢查一下選定的上下文寬度是否正確，這會幫你省不少事。

　　成比例的字號

　　我將ee-podcast.com變得更加“靈活”的第二步是使用比例字號，它和比例寬度的道理是相同的：將固定的像素值變成比例值，字體的比例值使用em進行計算.

　　要計算比例em，使用相同的公式(目標寬度 ÷上下文寬度 = 結果)即可,字體的上下文寬度就是它基本字號，通常在body元素中定義：

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

　　大多現(xiàn)代瀏覽器的基本字號是16px，如