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

　　我沒(méi)有對(duì)這些百分比值進(jìn)行四舍五入，而是直接運(yùn)用在CSS中。我也從來(lái)沒(méi)有遇到過(guò)任何瀏覽器對(duì)這樣精度的百分比值識(shí)別錯(cuò)誤的情況(包括IE)。

　　同時(shí)，我為每一個(gè)百分比值都注釋了計(jì)算它所用到的目標(biāo)寬度和上下文寬度，這對(duì)于今后的開(kāi)發(fā)來(lái)說(shuō)是非常重要的參考。

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

　　只要你的數(shù)學(xué)計(jì)算是正確的,那么將寬度值轉(zhuǎn)化為比例值的過(guò)程就是很簡(jiǎn)單的,或者,更具體地說(shuō),只要你的上下文寬度是對(duì)的，那么你得到的比例值也就是正確的.

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

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

　　圖3

　　剛開(kāi)始計(jì)算的時(shí)候,我先用960像素作為我的上下文寬度,因此的寬度比例為: 116 ÷ 960 = .120833333

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

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

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

　　如果你計(jì)算的比例寬度有任何問(wèn)題，請(qǐng)先檢查一下選定的上下文寬度是否正確，這會(huì)幫你省不少事。

　　成比例的字號(hào)

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

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

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

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