1、1 開篇內容決定形式，不同的應用場景需要不同的展現形式。布局最終的目的是為了讓內容能夠更加靈活和便捷的呈現在最終用戶的眼前。用戶只關心他是否能從不同的設備上能夠訪問到你的內容，而不會關心你通過使用什么技術手段能夠達到這種效果。2 布局的目的頁面的布局方式是頁面構成的主骨架。通用布局的目的主要是提供一種抽象，指導設計和開發人員都能夠按照某種規范來簡化設計和開發的過程。3 常見的布局方式以下描述的一些布局方式并不是完全互斥的，不同的布局之間可以互相嵌套。并且也沒有一種布局方式適用于所有的應用場景。具體采用哪種布局方式還需要看實際需求、應用場景以及實現難易程度。以下針對一些常見的布局方式進行描述：3

2、.1 固寬布局固寬布局比較簡單，這種布局有一個設置了固定寬度的外包裹，里面的各個模塊也是固定寬度而非百分比。重要的是容器（外包裹）元素是設置為不能移動的。一般為適應主流的分辨率，設置固定寬度為950px左右。如果小于這個寬度，則會出現滾動條。如，它為固定寬度為980px。上圖展示的是一個固定寬度布局的基本輪廓，三列，分別為520,200以及200，每列的間距為20px優點：1. 設計師所設計的就是最終用戶所看到的2. 設計更加簡單，并且更加容易定制3. 在所有瀏覽器中寬度一樣，所以不會受到圖片、表單、視頻和其他固定寬度內容的影響4. 不需要min-width、max-width等屬性，因為有些

3、瀏覽器并不支持這些屬性5. 即使需要兼容800×600這么小的分辨率，網頁的主體內容仍然有足夠的寬度易于閱讀缺點：1. 對于使用高分辨率的用戶，固定寬度布局會留下很大的空白。因此出現了“黃金比例”，“三分定律”，綜合平衡和其他設計原則2. 屏幕分辨率過小時會出現橫向滾動條3. 背景圖像的平鋪，無縫紋理，連續的圖案需要能適應更大的分辨率4. 在某些情況下，可用性會很低另外在考慮固定寬度布局的時候，可能會需要調查實際用戶常用的分辨率。下面是W3School調查的一個結果：當使用固定寬度布局時，應該確保至少居中外包裹DIV以保持一種平衡（margin:0 auto），否則，對于使用大分辨率

4、的用戶，整個頁面會被藏到一邊去。3.2 液態布局液態布局也通常被稱作流動布局。通常采用相對于分辨率大小的百分比的方式自適應不同的分辨率。上圖是一個簡單流動（流體）布局的輪廓。盡管有些設計師可能給流動布局中某些元素設置了固定寬度，比如margin，只要主體元素是百分比寬度，就可以讓布局自適應適應各種分辨率。禪意花園就是采用液態布局：1440*900800*600優點：1. 對用戶更加友好，因為它能夠部分自適應用戶的設置2. 頁面周圍的空白區域在所有分辨率和瀏覽器下都是相同的，在視覺上更美觀3. 如果設計良好，流動布局可以避免在小分辨率下出現水平滾動條缺點：1. 設計者需要在不同的分辨率下進行測試

5、，才能夠看到最終的設計效果2. 不同分辨率下圖像或者視頻可能需要準備不同的對應的素材。3. 在特別大的分辨率下，內容會被拉成長長的一行，變得難以閱讀使用液態布局的要點：液態布局設計越少依賴圖片和困難的技術，就越容易被制作和維護。它將能夠兼容各種分辨率。使用更為簡潔的代碼和設計，可以更好的防止、發現和解決兼容性問題。3.3 彈性布局它能和其他兩種主要布局類型（固定寬度和流動）結合使用。如就采用的是彈性布局。彈性布局使用em作為單位。1px是電腦顯示屏上一個無法度量的一個點，而1em是和元素本身的字體一致。em是相對單位，隨用戶字體大小變化而改變。參考px和em的區別優點：1. 應用恰當的彈性布局

6、對用戶十分友好。頁面中所有元素可以隨著用戶的偏好縮放。2. 對于同時喜歡流動和定寬布局的設計師來說，彈性布局是完美的，因為前兩種布局的優點在彈性布局中都能找到。缺點：1. 正是因為第一個優點，這種布局會產生很大的可用性問題。需要花更多時間理解和測試，讓布局適合所有用戶。2. 這種布局類型相對于其他兩個更難設計，它能帶來的某些可用性提升看起來并不值得。3. 根據布局的具體情況，一些彈性設計需要專門為IE6追加一些樣式。彈性布局會同時擁有固定和液態布局的優點。設計師會經常使用彈性布局的原則，如字體和容器大小使用em，然后巧妙地混合使用百分比和像素設置其他的布局元素。3.4 柵格化布局柵格化布局是現

7、在比較流行的一種布局方式，淘寶TED上有一個系列介紹文章。注：下面所描述的都是固寬情況3.4.1 什么是柵格化柵格系統英文為“grid systems”，是一種平面設計的方法與風格。運用固定的格子設計版面布局。能以規則的網格陣列來指導和規范網頁中的版面布局以及信息分布。如圖新浪微博的首頁：3.4.2 柵格系統的原理一個標準的柵格系統，包括以下部分:下面介紹柵格系統中的寬度是如何計算出來的：在網頁設計中，我們把寬度為“W”的頁面分割成n個網格單元“a”，每個單元與單元之間的間隙設為“i”,此時我們把“a+i”定義“A”。他們之間的關系如下：W =（a*n）+（n-1）*I，由于a+i=A，因此可

8、得：(A×n) i = W。注：最左右邊沒有邊距(margin-left,marign-right)。這個公式表述了網頁的布局與網頁“背后”的柵格系統之間的某種關系。以yahoo為例，來看一下柵格系統的應用：yahoo的網站頁面寬度為W=950px，每個區塊與區塊的間隔為i=10px；如果應用上面的公式，可以推出A=40px，即yahoo首頁橫向版式設計采用的柵格系統為：（40×n）- 10 = W下面列出當n等于不同數值時W變化的數值表格：從表格可以看出：yahoo首頁的布局是按照柵格系統進行設計的，每個區塊的寬度對應的n值分別為：4，11，9。在這里看到一個很有意思的事

9、情：只要保證一個橫向維度的各個區塊的n值相加等于24，則即可保證頁面的寬度一定是950px。然而，950px的寬度也恰好就是當n=24的時候，W的寬度值。由此得出以下的應用模式：設計師根據需要制定不同的版式或者劃分區塊，他們的依據將是上面的對應表進行設計。在固定寬度情況下，還可以切分成多種方式，如12*80等。n越大，靈活度越高。可以根據網頁的實際復雜度來選用對應的切法。16*603.4.3 柵格化的優點以及應用場景主要優點：1. 能大大提高網頁的規范性和可重用性。在柵格系統下，將頁面模塊的尺寸標準化，這對于大型網站的開發和維護來說，能節約不少成本；2. 基于柵格進行設計，可以讓整個網站各個頁

10、面的布局保持一致。這能增加頁面的相似度，提升用戶體驗；3. 對于設計師們來說，靈活地運用柵格系統，能做出很多優秀和獨特的設計。一般來說只實現寬度的柵格化，高度的柵格化由于字體的大小等的限制會出現得不償失的情況。另外如果一味地追求將所有設計都柵格化，則立刻會陷入地獄一般的黑暗中。主要設計到一個粒度問題：任何設計都有適用范圍，超出最佳適用范圍，強行使用只會帶來無盡的煩惱。以下場景非常適合柵格化：1. 頁面的總體寬度布局，比如兩欄、三欄等布局2. 一些固定區塊的尺寸，比如廣告圖片的尺寸3. 區塊之間的間距，可以參考柵格系統的槽寬（Gutter）4. 一些可以柵格化的小區域，暗合柵格往往能簡化布局上的

11、考慮3.4.4 柵格化布局實例Bootstrap實現了柵格化布局。這里以Bootstrap2.3為例，最新的版本為3.0.3Bootstrap的柵格系統為12列(最大列數)，形成一個940px寬的容器。Bootstrap的柵格系統有倆種，一種是固定式的，一種是流式的(也就是可適應寬度的)。 固定式柵格 固定式柵格系統每列的寬度(width)及列與列間的間距(margin)都是固定的，列寬為60px，列間距為20px。如下圖：在Bootstrap中定義了倆個樣式。容器為 .row ，可在容器中加入合適數量的 .span* 列。用法如

12、下：<div class="row"><div class="span8">.</div><div class="span4">.</div></div>顯示結果：用法非常類似<table> 標簽。"<div class='row'>"相當于是<table>，"<div class='span4'>"、"<div class=&#

13、39; span8'>" 相當于"<td cols='4'>"、"<td cols='8'>"。注意：由于默認是12列的柵格，所有 .span* 列所跨越的柵格數之和最多是12(或者等于其父容器的柵格數)。 流式(液態)柵格流式與固定式柵格的區別就是，每列的寬度是按照百分比來瓜分外圍包裹的寬度的。.row-fluid width: 100%;*zoom: 1;.row-fluid class*="span&quo

14、t; display: block;float: left;width: 100%;min-height: 30px;margin-left: 2.127659574468085%;*margin-left: 2.074468085106383%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin-left: 2.127659574468085% 以百分比設置列的左邊距(margin-left),約等于2.12

15、%, 我們以上面固定式中的940px 為例來算下大約是多少px。2.12% * 940 = 19.928 。 與20px很接近。<div class="container-fluid" style="border:1px solid #E3E3E3"> <div class="row-fluid"> <div class="span4" style="border:1px solid #F3E3E3">span 4</div> <d

16、iv class="span8" style="border:1px solid #A3E3E3">span 8</div> </div></div> 縮小窗口后也成比例縮小：3.5 響應式布局3.5.1 起因移動設備正超過桌面設備，成為訪問互聯網的最常見終端。于是，網頁設計師不得不面對一個難題：如何才能在不同大小的設備上呈現同樣的網頁？手機的屏幕比較小，寬度通常在600像素以下；PC的屏幕寬度，一般都在1000像素以上（目前主流寬度是1366×768），有的還達到了2000像素。同樣的內容，要在大小迥

17、異的屏幕上，都呈現出滿意的效果，并不是一件容易的事。很多網站的解決方法，是為不同的設備提供不同的網頁，比如專門提供一個mobile版本，或者iPhone/iPad版本。但是導致維護很復雜。于是”一次設計，普遍適用”進入人們的視野。當然“響應化”本身不是目的，我們真正需要的是一種機制，它能夠幫助網站根據不同的設備平臺(不同屏幕大小，方向)對內容、媒體文件和布局結構進行相應的調整與優化，從而使網站在各種環境下都能為用戶提供一種最優且相對統一的體驗模式3.5.2 提出2010年，Ethan Marcotte提出了"響應式網頁設計"（Responsive Web Design）這個

18、名詞，指可以自動識別屏幕寬度、并做出相應調整的網頁設計。下面是一個例子：福爾摩斯歷險記六個主人公的頭像。如果屏幕寬度大于1300像素，則6張圖片并排在一行。參考：如果屏幕寬度在600像素到1300像素之間，則6張圖片分成兩行。如果屏幕寬度在400像素到600像素之間，則導航欄移到網頁頭部3.5.3 實現關鍵技術實現響應式設計的關鍵方法：允許頁面寬度自動調整、利用媒體查詢根據不同的寬度設置不同的樣式、液態布局、自適應媒體(圖片、視頻等)。1. 運行頁面寬度自動調整在網頁代碼的頭部，加入一行viewport元標簽：<meta name="viewport" content

19、="width=device-width, initial-scale=1.0">viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。2.利用媒體查詢設置不同的樣式什么是媒體查詢？在CSS2中開始，就可以通過媒體類型在 CSS 中獲得媒體支持。<link rel="stylesheet" type="text/css" href="site.css

20、" media="screen" /><link rel="stylesheet" type="text/css" href="print.css" media="print" />media 屬性定義了應該用于指定每種媒體類型的樣式表：· screen 適用于計算機彩色屏幕。· print 適用于打印預覽模式下查看的內容或者打印機打印的內容。CSS3中擴展媒體類型函數，并允許在樣式表中使用更精確的顯示規則。媒體查詢 是評估 true 或 fals

21、e 的一種表達。如果為 true，則繼續使用樣式表。如果為 false，則不能使用樣式表。這種簡單邏輯通過表達式變得更加強大，使您能夠更靈活地對特定的設計場景使用自定義的顯示規則。 媒體查詢包含一個媒體類型，后跟一個或多個檢查特定條件（如最小的屏幕寬度）的表達式。樣式表中的媒體查詢看起來如下的示例所示。 media all and (min-width: 800px) . 所有最小水平屏幕寬度為 800 像素的屏幕（屏幕和打印等）都應使用如下 CSS 規則。該規則在示例中省略號所在的地方。對于該媒體查詢：· media all 是媒體類型，也就是說，將此 CSS 應用于所有媒體類型。

22、· (min-width:800px) 是包含媒體查詢的表達式，如果瀏覽器的最小寬度為 800 像素，則會告訴瀏覽器只運用下列 CSS。媒介查詢還可以支持多種查詢條件和邏輯關系，具體可以參考: 使用 CSS 媒體查詢創建響應式網站由于媒介查詢是CSS3中的規范，在IE8-是不支持媒介查詢的，不過可以采用第三方的工具：1. Respond.js這個JavaScript 庫它是一個極小的增強 Web 瀏覽器的 JavaScript 庫，使得原本不支持 CSS 媒體查詢的瀏覽器能夠支持它們。該腳本循環遍歷頁面上的所有 CSS 引用，并使用媒體查詢分析 CSS 規則。然后，該腳本會監控瀏覽器

23、寬度變化，添加或刪除與 CSS 中媒體查詢匹配的樣式。能夠在原本不支持的瀏覽器上運行媒體查詢。但是只支持創建響應式設計所需的最小和最大 width 媒體查詢。這并不是適用于所有可能 CSS 媒體查詢的一個替代。2. 使用css3-mediaqueries.js<!-if lt IE 9><script src="http:/css3-mediaqueries-<!endif->有兩種加載樣式的方式，一種是不同的屏幕大小，樣式文件分離，另外一種是內嵌樣式。n 加載不同的樣式文件如果屏幕寬度小于400像素（max-device-width: 400px），就

24、加載tinyScreen.css文件<link rel="stylesheet" type="text/css"media="screen and (max-device-width: 400px)"href="tinyScreen.css" />如果屏幕寬度在400像素到600像素之間，則加載smallScreen.css文件<link rel="stylesheet" media="screen and (min-width: 400px) and (max-de

25、vice-width: 600px)" href="smallScreen.css" /> n 內嵌樣式的加載：如果屏幕寬度小于400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。media screen and (max-device-width: 400px) .column float: none;width:auto;#sidebar display:none; 3. 液態布局主要涉及到不使用固定寬度、字體大小不使用絕對大小px，而使用相對大小em等4

26、. 自適應媒體需要為圖片設置max-width: 100%和height: auto，來實現其自動縮放。或者為避免某些情況下圖片放大或者縮小導致失真，可以根據不同的寬度來加載不同的圖片，如：一個具體例子可以參考，但是實現得不是很嚴謹，里面的寬度使用了絕對值。3.5.4 相關框架實現Foundation，Bootstrap利用 Bootstrap 進行快速 Web 開發3.6 自適應布局自適應布局和響應式布局的目的都是為了適應不同分辨率的情況，但是具體的區別不是很明顯，主要實現技術的區別：RWD(responsive-web-design)：· 采用 CSS 的 media query

27、 技術· 流體布局（ fluid grids ）· 自適應的圖片/視頻等資源素材AWD(adaptive-web-design)：· CSS media query 技術（僅針對有限幾種預設的屏幕尺寸設計）· 用 Javascript 來操作 HTML 內容· 在服務器端操作 HTML 內容（比如為移動端減少內容，為桌面端提供更多內容）其它一些區別可以參考如下一些文章：http:/xvfeng.me/posts/adaptive-vs-responsive-layouts-and-optimal-form-field-labels/3.7 瀑布

28、流布局參考百科詞條：瀑布流。視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。國內的一些實現如百度新聞APP， 美團網等。一些JQuery的插件：n 瀑布流布局的優點1. 有效的降低了界面復雜度，節省了空間：我們不再需要臃腫復雜的頁碼導航鏈接或按鈕了。2. 對觸屏設備來說，交互方式更符合直覺：在移動應用的交互環境當中，通過向上滑動進行滾屏的操作已經成為最基本的用戶習慣，而且所需要的操作精準程度遠遠低于點擊鏈接或按鈕。3. 更高的參與度：以上兩點所帶來的交互便捷性可以使用戶將注意力更多的集中在內容而不是操作上，從而讓他們更樂于沉浸在探索與瀏覽當中。

29、n 瀑布流布局的缺點1. 有限的用例：無限滾動的方式只適用于某些特定類型產品當中一部分特定類型的內容。例如，在電商網站當中，用戶時常需要在商品列表與詳情頁面之間切換，這種情況下，傳統的、帶有頁碼導航的方式可以幫助用戶更穩妥和準確的回到某個特定的列表頁面當中。2. 額外的復雜度：那些用來打造無限滾動的JS庫雖然都自稱很容易使用，但你總會需要在自己的產品中進行不同程度的定制化處理，以滿足你們自己的需求；另外這些JS庫在瀏覽器和設備兼容性等方面的表現也參差不齊，你必須做好充分的測試與調整工作。3. 沒有頁腳：如果使用了比較典型的無限滾動加載模式，這就意味著你可以和頁腳說拜拜了。最好考慮一下頁腳對于你

30、的網站，特別是用戶的重要性；如果其中確實有比較重要的內容或鏈接，那么最好換一種更傳統和穩妥的方式。千萬不要耍弄你的用戶，當他們一次次的瀏覽到頁面底部，看到頁腳，卻因為自動加載的內容突然出現而無論如何都無法點擊頁腳中的鏈接時，他們會變的越發憤怒。4. SEO：集中在一頁當中動態加載數據，與一頁一頁的輸出相比，究竟那種方式更利于SEO，這是你必須考慮的問題。對于某些以類型網站來說，在這方面進行冒險是很不劃算的。5. 關于頁面數量的印象：其實站在用戶的角度來看，這一點并非負面；不過，如果對于你的網站來說，通過更多的內容頁面展示更多的相關信息(包括廣告)是很重要的策略，那么單頁無限滾動的方式對你并不適

31、用。4 總結各種不同布局的方式和布局框架的實現最終的目的還是為了簡化設計和開發。不同的布局方式適應于不同的應用場景。盡管響應式設計是未來的一種趨勢，但實際上要實現所有屏幕的自適應要求非常高，尤其是在屏幕分辨率差異特別大的情況下。從成本考慮，比較合適的方式是一個Mobile版本和一個Screen版本，在這兩個版本下對于一些比較接近的幾種分辨率做自適應。另外從體驗考慮，移動和電腦終端的使用情景、流程、交互都有很大不同，最佳情況應該是針對性的做不同內容，而不是相同內容、自適應的呈現。響應式設計這方法論有幾個前提：1. 主體是足夠簡單的內容、而且用戶行為以消費為主，而不是生產（專業性較低）2. 計算需

32、求較弱3. 無法預期用戶的訪問設備。如果明知別人一定會用desktop設備訪問，或是使用場景本來就只有移動端，就沒必要再去做響應式了，直接針對特定尺寸設計會受到更少的限制不適合的范疇也就明確了：1. 工具平臺網站，因為他有過于復雜的用戶行為。比如Google的眾多手機版本的應用其實都對復雜功能有做很多裁剪，而且基本不用響應式的方式來做2. 游戲，因為計算量會比較大。5 附錄5.1 px和em的區別px像素（Pixel），相對長度單位。像素px是相對于顯示器屏幕分辨率而言的。em是相對長度單位，相對于當前對象內文本的字體尺寸。如果當前對行內文本的字體尺寸未被人為設置，則相對于瀏覽器的默認字體尺寸。因此用px來定義字體，就無法用瀏覽器字體放大的功能。任意瀏覽器的默認字體高都是16px。所有未經調整的瀏覽器都符合:1em=16px。那么12px=0.75em,10px=0.625