流式布局已經不是什麼新概念了。為了文章的完整性，還是提一提吧。很久很久以前，當大部分人的螢幕解析度還是1024*768的時候，網頁設計師一般都按照960px或是980px的固定寬度進行設計。現在很多大型**也依然使用這個寬度，為了不落下某些使用窄屏和ie6的使用者（比如我們的父母）。然後頁面中的其他布局元素也使用固定寬度。流式布局也正是相對這樣的固定布局來說的。看下面兩幅圖就可以一目了然的區分固定布局和流式布局。
圖1 固定布局
圖2 流式布局
可以看到，流式布局使用百分比寬度來限定布局元素，這樣可以根據客戶端解析度的大小來進行合理的顯示。那麼，是不是只要把布局元素換成百分比就算是流式布局了呢？當然不是啦，乙個頁面中還有各種字型大小、邊框、間距、浮動層以及動態的元素，還必須讓它們也在不同螢幕下能正確顯示。我看過一些例子，發現沒有哪個能站出來說，這就是標準的流式布局。而事實恰恰是整體的頁面採用百分比布局，在細小的地方依然需要使用畫素計算來達到效果。
這樣的定位顯然是需要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加到的父級元素上，從源頭上就限制放大的最大值，這樣與它的相鄰兄弟的比例就不會失調了。可以看到也是個權衡的結果。不敢保證這樣的方案就一定沒有問題，因為頁面結構千變萬化，這裡指提供乙個思路，具體的解決辦法，還是得具體分析頁面。
哎喲，差點忘了，**查詢呀！為了防止放大的過寬，你完全可以通過**查詢來設定不同解析度下的閾值。再加上這個神器，相信你會組合出完美的方案。響應式設計，說到底還是乙個權衡的過程。
其原理是，在頁面載入的時候，先向服務端的乙個php檔案傳送請求，該php檔案會在服務端處理，生成對應大小尺寸的，例如你用手機訪問這個頁面，服務端將生成乙個小尺寸的來供你顯示，這樣將節省很大的頻寬。你也可以設定這個小的快取時間，超時後它將會被刪除，不會占用伺服器空間。是不是很爽呢，快去試試吧，官網有使用方法，只需幾步，很簡單。
關於如何編寫流式布局頁面的章節結束了，這一章確實學到了不少使用的技術。不過還是感覺部落格的技術含量不高，我想乙個原因是我的部落格中沒有寫**示例。光是一些描述性的文字。好，從下章開始，彌補一下這方面的不足。
《響應式web設計》讀書筆記（三）擁抱流式布局
流式布局已經不是什麼新概念了。為了文章的完整性，還是提一提吧。很久很久以前，當大部分人的螢幕解析度還是1024 768的時候，網頁設計師一般都按照960px或是980px的固定寬度進行設計。現在很多大型 也依然使用這個寬度，為了不落下某些使用窄屏和ie6的使用者 比如我們的父母 然後頁面中的其他布局...
《響應式web設計》讀書筆記（一）入門
2013年的夏天，我算是正式加入了前端開發的隊伍，作為一名新手，關注了很多知名 牛人部落格，時時刻刻感覺要學的東西太多太多，一路不斷的收藏收藏，攢了好多文章來看，心裡還想著在前端世界裡，我不知道的東西還有多少呢？css布局很熟了嗎？沒有。js框架呢？沒用過多少。自己想寫個外掛程式什麼的嗎？想。響應式...
《響應式web設計實踐》筆記
1.什麼是響應式設計 針對任意裝置對網頁內容進行完美布局的一種顯示機制。響應式 設計 responsive web design 的理念是 頁面的設計與開發應當根據使用者行為以及裝置環境 系統平台 螢幕尺寸 螢幕定向等 進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局 css m...