一、什么是流式布局

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

圖1 固定布局

圖2 流式布局

? ? 可以看到，流式布局使用百分比寬度來(lái)限定布局元素，這樣可以根據(jù)客戶端分辨率的大小來(lái)進(jìn)行合理的顯示。那么，是不是只要把布局元素?fù)Q成百分比就算是流式布局了呢？當(dāng)然不是啦，一個(gè)頁(yè)面中還有各種字號(hào)、邊框、間距、浮動(dòng)層以及動(dòng)態(tài)的元素，還必須讓它們也在不同屏幕下能正確顯示。我看過(guò)一些例子，發(fā)現(xiàn)沒(méi)有哪個(gè)能站出來(lái)說(shuō)，這就是標(biāo)準(zhǔn)的流式布局。而事實(shí)恰恰是整體的頁(yè)面采用百分比布局，在細(xì)小的地方依然需要使用像素計(jì)算來(lái)達(dá)到效果。

? ? 我一直認(rèn)為流式布局中不能使用position:absolute這樣的寫法，因?yàn)楣潭宋恢?#xff0c;顯然就不能“流動(dòng)”了嘛。但有時(shí)候這樣的屬性是不得不用的，想新浪微博的消息提示，如圖（圖標(biāo)右上角的小紅點(diǎn)）：

? ? ? ??

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

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

? ? ②區(qū)塊內(nèi)的細(xì)節(jié)定位，還是得需要像素來(lái)計(jì)算；

? ? ③float屬性盡量不使用，這樣會(huì)破壞“流動(dòng)性”；

? ? ④布局元素通過(guò)彼此之間的間距來(lái)進(jìn)行定位，不用left、top這樣的屬性把位置定死

? ? 而且還需要一個(gè)權(quán)衡，哪里使用百分比哪里使用像素，并沒(méi)有標(biāo)準(zhǔn)的答案。

二、響應(yīng)式設(shè)計(jì)與流式布局的和諧共處

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

三、開始流式布局吧

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

目標(biāo)元素寬度 / 上下文元素寬度 = 百分比寬度

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

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

? ? 下來(lái)再看看字體大小。同樣我們要使用相對(duì)值。現(xiàn)代瀏覽器默認(rèn)的字體大小是16px，即相當(dāng)于你已經(jīng)拿到了body的字號(hào)16px作為參考值。我們用em為單位來(lái)表示字體的相對(duì)大小。計(jì)算公司依然使用上面的?目標(biāo)元素寬度 / 上下文元素寬度 = 百分比寬度。例如，你的某個(gè)div的字體大小為48px，轉(zhuǎn)化后為48/16=3em。同樣，如果你得到的是一個(gè)很長(zhǎng)的小數(shù)，也盡管使用它，像2.235423em這樣的寫法也是沒(méi)什么問(wèn)題的。

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

? ? 下來(lái)該看看圖片該怎么處理了。彈性圖片這個(gè)名字是不是已經(jīng)很熟悉了。其實(shí)也沒(méi)有什么神秘的，就是讓圖片的寬度變?yōu)榘俜直鹊?#xff0c;讓其能自適應(yīng)罷了。那這和其他布局元素的百分比處理有什么區(qū)別呢？區(qū)別當(dāng)然是有的啦，首先圖片不是布局元素，它里面是不包含子元素的。其次，圖片還有失真的問(wèn)題，縮放不當(dāng)都會(huì)造成失真。作者提到，只要給圖片添加樣式max-width:100%就可以實(shí)現(xiàn)彈性圖片了，因?yàn)閳D片所處的容器是自動(dòng)縮放的，只要讓圖片限制在父級(jí)的寬度之內(nèi)，就可以隨父級(jí)一塊縮放了。嗯，是個(gè)不錯(cuò)的想法。但是此做法有個(gè)大大的問(wèn)題呀，比如，父元素的樣式為width:80%，在屏幕分辨率較大的情況下可能計(jì)算得出的實(shí)際像素為1000px，同時(shí)假如圖片的實(shí)際寬度為500px，小于父親寬度，這樣父元素在500px~1000px之間縮放時(shí)，圖片始終保持500px的實(shí)際大小沒(méi)有變化，因?yàn)樗冀K沒(méi)有超出父元素的寬度。

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

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

? ? 哎喲，差點(diǎn)忘了，媒體查詢呀！為了防止放大的過(guò)寬，你完全可以通過(guò)媒體查詢來(lái)設(shè)置不同分辨率下的閾值。再加上這個(gè)神器，相信你會(huì)組合出完美的方案。響應(yīng)式設(shè)計(jì)，說(shuō)到底還是一個(gè)權(quán)衡的過(guò)程。

四、提供不同尺寸的圖片

? ? 如果你不滿足于經(jīng)過(guò)種種權(quán)衡后的結(jié)果，還有一種方案可以保證你的圖片可以高保真顯示：在不同的設(shè)備上提供不同尺寸的圖片。你可能會(huì)發(fā)愁準(zhǔn)備圖片的事情了，現(xiàn)在不必了，因?yàn)橐呀?jīng)有工具可以替你做了。好，有請(qǐng)這位神器出場(chǎng)：adaptive-images。官網(wǎng)地址：http://adaptive-images.com/

? ? 其原理是，在頁(yè)面加載圖片的時(shí)候，先向服務(wù)端的一個(gè)php文件發(fā)送請(qǐng)求，該P(yáng)HP文件會(huì)在服務(wù)端處理圖片，生成對(duì)應(yīng)大小尺寸的圖片，例如你用手機(jī)訪問(wèn)這個(gè)頁(yè)面，服務(wù)端將生成一個(gè)小尺寸的圖片來(lái)供你顯示，這樣將節(jié)省很大的帶寬。你也可以設(shè)置這個(gè)小圖片的緩存時(shí)間，超時(shí)后它將會(huì)被刪除，不會(huì)占用服務(wù)器空間。是不是很爽呢，快去試試吧，官網(wǎng)有使用方法，只需幾步，很簡(jiǎn)單。

五、總結(jié)

? ? 關(guān)于如何編寫流式布局頁(yè)面的章節(jié)結(jié)束了，這一章確實(shí)學(xué)到了不少使用的技術(shù)。不過(guò)還是感覺(jué)博客的技術(shù)含量不高，我想一個(gè)原因是我的博客中沒(méi)有寫代碼示例。光是一些描述性的文字。好，從下章開始，彌補(bǔ)一下這方面的不足。

本文轉(zhuǎn)自呂大豹博客園博客，原文鏈接：http://www.cnblogs.com/lvdabao/archive/2013/05/23/3095699.html，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。