響應式web設計實踐
要想弄清楚在哪些情況下靈活布局可能會是我們最好的選擇，我們就要先知道我們還有哪些選擇。只有先明白了每種選擇的優缺點，我們才有可能做出正確的決定，並保證我們的站點能在各種環境中發揮出最大優勢。
在廣受好評的《flexible web design（靈活的web設計）》一書中，作者zoe mickley定義了4種布局型別：固定布局、流體布局、彈性布局和混合布局。
這裡提到的每種布局都有著它們各自的優勢、劣勢以及面臨的挑戰。
固定布局是web布局中最為常見的實現方式，因為固定布局會給人一種對頁面擁有較多控制權的錯覺。能確切地知道你的站點會以多寬來顯示，這使得你能建立出擁有大量圖形的設計，而且即使在不同的螢幕上，它們也能看起來相當一致。
然而，固定布局最大的問題在於，你做的一切都是在許多假設前提之下的。當你決定站點應該有多寬時，你不得不去猜測什麼樣的尺寸可以照顧到大多數的訪客，而這其中又暗藏著比從表面上看起來多得多的技巧。早在智慧型手機、平板電腦這些裝置出現之前，就已經存在了大量使用不同大小螢幕的訪客了，而這也僅僅是個開始，因為有些人並不會全屏瀏覽網頁，還有些人的瀏覽器裝有帶邊欄的外掛程式——這些都在很大程度上降低了站點可以利用的實際空間。
此外，固定布局帶給我們的所謂「一致性」的優點其實也帶有些許誤導。如果你的站點是960px寬的，當訪客使用螢幕較小（假設是800px寬）的裝置瀏覽站點時，他將只能看到站點的一部分，而且還會看到乙個醜陋的水平滾動條（圖2.1）。
大螢幕裝置也同樣存在問題：如果有人用大螢幕裝置瀏覽960px寬的站點，那他就會在頁面兩邊看到大片的、未使用的空白區域。雖然留白作為設計的一部分固然是好的，但是對於人們意料之外的大片空白，我想沒有誰能從中獲益。
嚴格的固定布局在今天廣泛而多樣的裝置生態系統中早已問題重重，因為當今很多最新、功能最強的手機和平板電腦的瀏覽器都會預設顯示縮小之後的網頁，以此來適應它們那較小的螢幕。雖然可以在螢幕上通過手指來縮放頁面（當然提供這樣的放大功能總比不提供要好），但這樣的操作還是會讓人感到繁瑣，況且這一過程也遠遠不能稱之為是一種享受。
在流動布局中，度量的單位不再是畫素，而是變成了百分比，這樣可使頁面具有可變的特性。你可以設計乙個佔容器寬度60%的內容欄、乙個佔容器寬度30%的邊欄，以及乙個佔容器寬度10%的分隔區域。採用這種方法定義，意味著你不用再去關心使用者使用的到底是1024px寬的桌面瀏覽器，還是768px寬的平板電腦瀏覽器，因為元素的寬度會根據瀏覽器視窗的寬度自動進行調整。
注意gillenwater在她的分類中稱為流體布局；在本書中稱為流動布局。流動布局的設計可以避免許多會在固定布局中遇到的問題，例如，在大多數情況下，流動布局中都不會出現水平滾動條。由於站點可以根據瀏覽器視窗的寬度來自動調節自身寬度，因此站點將可以充分利用並適應各種大小的可用空間，從而也就避免了在使用大螢幕裝置瀏覽固定布局時，人們所不願見到的大片空白出現。
同時，在實施諸如媒介查詢、針對不同解析度優化樣式這樣的響應式策略時，流動布局能使這些策略更容易實現（我們會在後面的章節中對此做詳細的介紹）。由於沒有那麼多的問題需要修復，所以需要寫的css也相對較少。但是，單獨使用流動布局這一種方法依然不足以保證所有元素在從手機到電視機等一系列裝置都能保持良好的效果。因為有些文字的行寬在大螢幕上看起來會太寬，而在小螢幕上又看起來太窄。流動布局僅僅是個開始，後面還會有為什麼這本書沒有到此為止的其他原因。
彈性布局與流動布局類似，只是它們的度量單位不同——通常情況下，在彈性布局中會以em來作為單位。1em相當於當前字型的大小，例如，如果body的字型大小是16px，那麼此時1em就等於16px，同理2em等於32px。
彈性布局為設計師們在排版方面提供了強大的控制權。大量研究表明，理想的閱讀文字的行寬介於45到70個字元之間。利用彈性布局，你可以將容器的寬度設定為55em，這樣就可以使容器維持在乙個合適的寬度了。
彈性布局帶來的另外乙個好處是隨著使用者增大或者減小字型，使用彈性布局的元素的寬度也會等比例地變化，我們會在後面討論字型大小時進一步討論這個問題。
但是，在彈性布局中也可能出現令人討厭的水平滾動條。如果你把字型大小設定為16px，並把容器寬度設定為55em，那麼就會在任何寬度小於880px（16×55）的螢幕**現水平滾動條。彈性布局中的這個問題甚至比固定布局中的情況還要有更多的不確定性，因為如果使用者把字型放大到了18px，那麼你的容器寬度便會達到990px（18×55）。
我們的最後乙個選擇就是混合布局，它結合了上面提到的兩種或兩種以上的布局方式。
例如，假設你有乙個300px寬的廣告區域，那麼你可以將放置廣告的邊欄指定為固定的300px寬，其餘各列的寬度則以百分比為單位。這樣做即保證了廣告的寬度是固定的300px（考慮到第三方的廣告服務，這樣安排是很有必要的），同時除邊欄之外的其他內容也能填滿剩下的整個空間。
視口瀏覽器呈現網頁時的可見區域。但是在流動布局中使用上面這種方法會很容易使頁面變得凌亂不堪，如果把邊欄設定為300px寬，把主要內容欄設定為70%，那麼當螢幕寬度小於1000px時，你還是會遇到水平滾動條的問題。因為此時300px寬的邊欄已經超過了分配給它的寬度，即視口寬度的30%，剩下的空間已經小於了內容欄所要求的70%。不過萬幸的是，還有另外一種建立混合布局的方法，我們會在後面的章節中提到。
如果你是毫無壓力地讀完上面這一段的，而且沒有回想起你高中的數學課，那麼我可就要為你鼓掌了。
那麼到底哪種方式才是正確的、能對於各種裝置和環境都具有響應性的呢？從根本上來說，這取決於你特定的專案，因為每一種方法都有其優勢和不足。
大多數情況下，最佳答案是更具靈活性的那幾種布局——流動布局、彈性布局或者混合布局——因為相比固定布局，它們對未來更加友好。
雖然能夠通過使用媒介查詢來在幾個固定布局之間來回切換，但這樣做仍舊存在限制。因為使用乙個這樣的「可切換」的固定布局，會使得你的站點在某幾個特定解析度的螢幕中顯示得非常好，但在這幾個值之間過渡的那些解析度的螢幕中就會顯得比較尷尬。這樣一來，使用者就會受到你的決定的支配：如果他的裝置與你選定的不一致，那麼他的體驗還不如你什麼都不做時好呢。
媒介查詢媒介查詢允許你根據裝置的資訊——諸如螢幕寬度、方向或者解析度等屬性來使用不同的樣式。所以，雖然「可切換」的固定布局的方法在大方向上是對的，但這有點像是每天晨跑前，你都要花30分鐘先坐在沙發上吃個冰激凌一樣——雖然有總比沒有強，但你沒有得到你本應該得到的全部。
斷點那些被指定的、開始應用某一新的媒介查詢的點。例如，乙個在980px處的斷點的意思是，當瀏覽器寬度大於或小於這一數值時，新的媒介查詢將被觸發。相反，如果你使用流動布局，至少你已經得到了很大一部分。甚至沒有媒介查詢的幫助，你的設計都能夠在不同的視口之間作出調整，雖然會有一些不完美。
當你開始強調媒介查詢的作用時，你便很容易忽視掉另外一點：其實是彈性布局或流動布局在發揮更主要的作用（參見第3章）。流動布局為你做的事情越多，你需要建立的斷點、寫的css**就越少。當你有了乙個強大的流動布局的時候，媒介查詢就會弱化為一種調整設計的手段，而不必再去重新建立另外的設計。
響應式Web設計 布局
去年上半年，我開始著手推動專案中響應式設計的落 地。以官網優化需求為契機，主動去做了響應式的頁面設計，也說服了產品 設計和開發的www.cppcns.com相關同事一起把它上線落實，但不幸的是，由於各種方面的原因，比如，生搬硬套的pc模組，無差異化的設計使得移動端閱讀不佳，導航相容性有限等等原因，上...
《響應式Web設計實踐》一第2章 流動布局
響應式web設計實踐 一棵大橡樹被風連根拔起，然後落到了一片蘆葦叢中。橡樹對蘆葦們說 我很想知道，你們如此輕而弱小，卻為什麼沒有被大風吹走呢？蘆葦們回答道 你和大風打鬥對抗，結果就被摧毀了 而我們在大風來臨之前便彎下了腰，並因此保持完好而存活了下來。橡樹與蘆葦 伊索寓言 在 橡樹與蘆葦 的故事中，大...
《響應式web設計實踐》筆記
1.什麼是響應式設計 針對任意裝置對網頁內容進行完美布局的一種顯示機制。響應式 設計 responsive web design 的理念是 頁面的設計與開發應當根據使用者行為以及裝置環境 系統平台 螢幕尺寸 螢幕定向等 進行相應的響應和調整。具體的實踐方式由多方面組成，包括彈性網格和布局 css m...