一、什么是流式布局

? ? 流式布局已經不是什么新概念了。為了文章的完整性，還是提一提吧。很久很久以前，當大部分人的屏幕分辨率還是1024*768的時候，網頁設計師一般都按照960px或是980px的固定寬度進行設計。現在很多大型網站也依然使用這個寬度，為了不落下某些使用窄屏和IE6的用戶（比如我們的父母）。然后頁面中的其他布局元素也使用固定寬度。流式布局也正是相對這樣的固定布局來說的。看下面兩幅圖就可以一目了然的區分固定布局和流式布局。

圖1 固定布局

圖2 流式布局

? ? 可以看到，流式布局使用百分比寬度來限定布局元素，這樣可以根據客戶端分辨率的大小來進行合理的顯示。那么，是不是只要把布局元素換成百分比就算是流式布局了呢？當然不是啦，一個頁面中還有各種字號、邊框、間距、浮動層以及動態的元素，還必須讓它們也在不同屏幕下能正確顯示。我看過一些例子，發現沒有哪個能站出來說，這就是標準的流式布局。而事實恰恰是整體的頁面采用百分比布局，在細小的地方依然需要使用像素計算來達到效果。

? ? 我一直認為流式布局中不能使用position:absolute這樣的寫法，因為固定了位置，顯然就不能“流動”了嘛。但有時候這樣的屬性是不得不用的，想新浪微博的消息提示，如圖（圖標右上角的小紅點）：

? ? ? ??

? ? 這樣的定位顯然是需要position:absolute這樣的屬性的。所以，以我粗淺的理解，流式布局的特征應該是這樣的：

? ? ①凡是布局元素，即與其他版塊相互分離的區塊，寬度間距都要用百分比；

? ? ②區塊內的細節定位，還是得需要像素來計算；

? ? ③float屬性盡量不使用，這樣會破壞“流動性”；

? ? ④布局元素通過彼此之間的間距來進行定位，不用left、top這樣的屬性把位置定死

? ? 而且還需要一個權衡，哪里使用百分比哪里使用像素，并沒有標準的答案。

二、響應式設計與流式布局的和諧共處

? ? 按照上面提到的權衡之后，會引起一個大問題，就是不能像素級別的精確還原設計圖，拖動瀏覽器窗口的大小會發現元素間的相對位置會有大大小小的偏差。每當這個時候，我就有種對不住設計師的趕腳~怎么辦呢？親，還記得媒體查詢碼？對了，解決辦法便是讓這兩者協調工作，使用百分比創建流動的彈性界面，同時使用媒體查詢來限制元素的變動范圍，這樣便可以更精確的還原設計圖了。

三、開始流式布局吧

? ? 拿過設計師的界面原型圖，不管他是按960px還是1000px寬度設計的，首要工作便是把這些像素轉化為百分比。如何轉化呢？看作者給出的公式：

目標元素寬度 / 上下文元素寬度 = 百分比寬度

? ??好了，可以拿出你的計算器了。誒，等等，這個上下文元素寬度是什么啊？就是目標元素的父親嗎？萬一它的父親沒有寬度怎么辦？幸好前幾天看了BFC的概念，我覺得這里的上下文元素就可以認為是目標元素所處的最靠近的具有BFC的元素，就是把它隔離開的可參照的父級元素，具體頁面具體分析，相信你你能找到的。那如果上下文元素沒有寬度呢？同樣，相信你自己，它的寬度只是沒有顯式指定而已，你總是可以把它的寬度找出來的，是不是默認100%了？那就再看看它的父級元素的寬度（是不是廢話了。。。）。如果實在找不出來呢，那就給它設置一個寬度得了，在能正確布局你的頁面的前提下。

? ? 來舉個例子，比如整個設計圖的寬度是960px，按照1024px屏幕分辨率做參照的話，百分比應該是960/1024 = 93.75%。其他的寬度也可以按照960px為參照計算出來了。另外要提的一點是，如果除下來的結果是很長的小數，比如340/960 = 0.3541666666666667 ，要不要四舍五入呢？作者此處的建議是不要，這樣可以保持最高的精確度，而且你寫的再長，瀏覽器也能認識，所以這些小數還是盡可能完整保留。

? ? 下來再看看字體大小。同樣我們要使用相對值。現代瀏覽器默認的字體大小是16px，即相當于你已經拿到了body的字號16px作為參考值。我們用em為單位來表示字體的相對大小。計算公司依然使用上面的?目標元素寬度 / 上下文元素寬度 = 百分比寬度。例如，你的某個div的字體大小為48px，轉化后為48/16=3em。同樣，如果你得到的是一個很長的小數，也盡管使用它，像2.235423em這樣的寫法也是沒什么問題的。

? ? 提到字體大小就不能不提行高（line-height），行高的計算是以自身的字體大小為參照的，這一點不要忘記。所以，同樣把line-height也轉化為em單位。

? ? 下來該看看圖片該怎么處理了。彈性圖片這個名字是不是已經很熟悉了。其實也沒有什么神秘的，就是讓圖片的寬度變為百分比的，讓其能自適應罷了。那這和其他布局元素的百分比處理有什么區別呢？區別當然是有的啦，首先圖片不是布局元素，它里面是不包含子元素的。其次，圖片還有失真的問題，縮放不當都會造成失真。作者提到，只要給圖片添加樣式max-width:100%就可以實現彈性圖片了，因為圖片所處的容器是自動縮放的，只要讓圖片限制在父級的寬度之內，就可以隨父級一塊縮放了。嗯，是個不錯的想法。但是此做法有個大大的問題呀，比如，父元素的樣式為width:80%，在屏幕分辨率較大的情況下可能計算得出的實際像素為1000px，同時假如圖片的實際寬度為500px，小于父親寬度，這樣父元素在500px~1000px之間縮放時，圖片始終保持500px的實際大小沒有變化，因為它始終沒有超出父元素的寬度。

? ? 看來作者也有疏漏啊。所以彈性圖片不光是用max-width就可以的。還得使用百分比寬度。就像計算布局元素的寬度一樣來。（真沒意思）不過不要忘了圖片的失真問題。當用戶使用的一個超寬屏幕時，圖片被放大到原大小的兩倍甚至更多，這圖就沒法看了。所以還需為圖片設置閾值，也就是上限啦，看來這個max-width還是不可少的。所以一個彈性圖片的比較理想的組合應該是像這樣：width:30%; max-width:400px;不讓它超過一個寬度。那這樣是不是就沒問題了呢？

? ? 還是一個使用超寬屏幕的用戶，按照正常的頁面設計比例，這張圖片被放大到500px了，但是現在只能顯示最大寬度400px，豈不是與設計稿不符了。看來還是個問題呀。此處作者又給出另一個組合，把max-width加到圖片的父級元素上，從源頭上就限制放大的最大值，這樣圖片與它的相鄰兄弟的比例就不會失調了。可以看到也是個權衡的結果。不敢保證這樣的方案就一定沒有問題，因為頁面結構千變萬化，這里指提供一個思路，具體的解決辦法，還是得具體分析頁面。

? ? 哎喲，差點忘了，媒體查詢呀！為了防止放大的過寬，你完全可以通過媒體查詢來設置不同分辨率下的閾值。再加上這個神器，相信你會組合出完美的方案。響應式設計，說到底還是一個權衡的過程。

四、提供不同尺寸的圖片

? ? 如果你不滿足于經過種種權衡后的結果，還有一種方案可以保證你的圖片可以高保真顯示：在不同的設備上提供不同尺寸的圖片。你可能會發愁準備圖片的事情了，現在不必了，因為已經有工具可以替你做了。好，有請這位神器出場：adaptive-images。官網地址：http://adaptive-images.com/

? ? 其原理是，在頁面加載圖片的時候，先向服務端的一個php文件發送請求，該PHP文件會在服務端處理圖片，生成對應大小尺寸的圖片，例如你用手機訪問這個頁面，服務端將生成一個小尺寸的圖片來供你顯示，這樣將節省很大的帶寬。你也可以設置這個小圖片的緩存時間，超時后它將會被刪除，不會占用服務器空間。是不是很爽呢，快去試試吧，官網有使用方法，只需幾步，很簡單。

五、總結

? ? 關于如何編寫流式布局頁面的章節結束了，這一章確實學到了不少使用的技術。不過還是感覺博客的技術含量不高，我想一個原因是我的博客中沒有寫代碼示例。光是一些描述性的文字。好，從下章開始，彌補一下這方面的不足。

本文轉自呂大豹博客園博客，原文鏈接：http://www.cnblogs.com/lvdabao/archive/2013/05/23/3095699.html，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的《响应式web设计》读书笔记（三）拥抱流式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。