響應式網(wǎng)頁設計的靈活性

過去的一年里，如果你不是住在深山里，就一定知道響應式網(wǎng)頁設計，它已經(jīng)成為當今的主流。響應式設計是Ethan Marcotte提出的，概念很簡單：使網(wǎng)站的頁面布局能夠根據(jù)不同設備和分辨率進行自動調(diào)整。

　　當我第一次了解到它時，我就立即被迷住了--特別是media queries，我馬上就用到我自己的個人兼職網(wǎng)站上。我甚至寫了一篇文章介紹《如何使用CSS3 Media Queries響應不同設備》(強烈建議在讀這篇文章之前讀一下)。

　　在第一次嘗試使用media queries后，我很快意識到我忽略了一個響應式設計的重點： 靈活性。

　　挑戰(zhàn)固定寬度

　　我的個人兼職網(wǎng)站使用了固定寬度的設計，所有的width, margin和padding都使用了固定的像素值。 我一般都會這樣寫網(wǎng)站，因為對我來說它更簡單，更快速。

　　但當我試圖在我的固定寬度的網(wǎng)站上應用media queries的時候，那些簡單和快速的優(yōu)勢全部都消失了。為什么?因為對于固定寬度的設計，我需要非常細致的定義media queries并在CSS文件中調(diào)整每個單獨的像素值，基本上，我需要為每一種可能的分辨率都設計一個全新的布局，繁瑣!慢!!還不好玩!!!

　　我有幸聽了Marcotte先生在《In Control 2011》的演講，他討論了響應式設計的理論和最佳實踐，諸如fluid grid(流體網(wǎng)格)實現(xiàn)方式。

　　流動且靈活的公式

　　流動式布局是靈活的。由于width，margin和padding(甚至字體和圖像)使用了百分比和em(相對長度單位)，因此頁面布局會隨著瀏覽器的窗口變化而變化。隨著分辨率的改變，布局會成比例地進行調(diào)整，實現(xiàn)過程中不需要用到任何media query。

　　這對于實現(xiàn)響應式網(wǎng)頁設計來說簡直太美妙了。如果我有一個基于比例值的布局，流動式的網(wǎng)格將替我完成大部分繁重的工作。我的media query將不再需要包含那些覆蓋其他分辨率的所有width, margin和padding的樣式定義。

　　但是也有一點讓我感到頭疼，計算流動式網(wǎng)格的比例寬度需要用到一些數(shù)學知識，我數(shù)學不太好…

　　幸運的是, Ethan 提供了一個很簡單(即便對我來說)的公式來計算比例寬度:

　　目標寬度÷上下文寬度=結(jié)果(比例寬度)

　　這個公式用子元素的像素寬度(目標寬度)除以它父元素的像素寬度(上下文寬度)，得到的結(jié)果就是這個子元素的比例寬度。

　　圖1 實例：目標寬度(300px)和上下文寬度(960)像素

　　在圖1中,例如,深灰色區(qū)域?qū)挾葹?00px，包含在寬度為960px的淺灰色區(qū)域中.這里,960像素區(qū)域是上下文元素,300像素區(qū)域是目標元素,所以我們的數(shù)學公式是: 300 ÷ 960 = 0.3125

　　0.3125這個結(jié)果需要變成瀏覽器可識別的數(shù)值, 因此需要轉(zhuǎn)化成一個比例值, 將小數(shù)點右移兩位，變成31.25% 即可。然后在CSS中,將元素的寬度設定為這個比例值:

　　aside{ background-color:#ccc; float:left; width:31.25%; }

　　測試一下

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

　　比例寬度

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

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

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

　　Logo: 240 ÷ 940 = .255319148

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

　　分享鏈接: 90 ÷ 940 = .09574468

　　隨后我將這些浮點值轉(zhuǎn)換成百分比值，運用到我的CSS中：

　　#logo a{ width:25.5319148%;/*240px/940px*/ } #hosts{ width:46.3829787%;/*436px/940px*/ } #push{ width:9.574468%;/*90px/940px*/ }

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

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

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

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

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

　　像圖3中標示,主持人信息是一個包含