響應式網頁設計基礎也是重點：靈活性（二）

測試一下

　　公式雖然看起來很簡單，但我知道口碑行銷必須在實際的網站中檢驗一下才行。幸運的是，我最近加入了EE播客，正在重新設計那個網站。當我的搭檔給我她的 PS 設計文件時，我就決定將它打造成靈活布局的網站。

　　比例寬度

　　我首先記錄下所有元素的像素寬度。(在排版設計事，我們沒有嚴格遵循網格布局，這也是我建議的做法)正如你在圖2中看到的。整體寬度為940像素，Logo，主持人介紹和分享鏈接都有它們各自的像素寬度。

　　圖2 主頁和頂部導航元素的像素寬度

　　按照 Ethan 的公式，整體寬度940px就是我的上下文寬度，根據它就可以確定所有元素的比例寬度。

　　Logo: 240 ÷ 940 = 。255319148

　　主持人介紹: 436 ÷ 940 = 。463829787

　　分享鏈接: 90 ÷ 940 = 。09574468

　　隨後我將這些浮點值轉換成百分比值，運用到我的CSS中：

　　#logo a{ width:25。5319148%；/*240px/940px*/ } #hosts{ width:46。3829787%；/*436px/940px*/ } #p網路行銷ush{ width:9。574468%；/*90px/台北網頁設計940px*/ }

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

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