靜态、自适應、流式、響應式、彈性布局等的概念

一、靜态布局（Static Layout）

即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為機關。

1、布局特點：不管浏覽器尺寸具體是多少，網頁布局始終按照最初寫代碼時的布局來顯示。正常的pc的網站都是靜态（定寬度）布局的，也就是設定了min-width，這樣的話，如果小于這個寬度就會出現滾動條，如果大于這個寬度則内容居中外加背景，這種設計常見與pc端。

2、設計方法：

　　PC：居中布局，所有樣式使用絕對寬度/高度(px)，設計一個Layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；

　　移動裝置：另外建立移動網站，單獨設計一個布局，使用不同的域名如wap.或m.。

　   在移動端開發中采用靜态布局的兩種方式：(來自：流布局與響應式網頁設計有什麼差別？)

　（1）在viewport meta标簽上設定width=320，頁面的各個元素也采用px作為機關。通過用JS動态修改标簽的initial-scale使得頁面等比縮放，進而剛好占滿整個螢幕。（見前端開發-web app 變革之rem）

　（2）設在viewport meta标簽上設定content"width=640,user-scalable=no，頁面的各個元素也采用px作為機關。由于640px超出了手機寬度，浏覽器會自動縮小頁面至剛好全屏。（具體見content"width=640,user-scalable=no" 然後再進行固定尺寸的px設計？ - 前端開發）

優點：這種布局方式對設計師和CSS編寫者來說都是最簡單的，亦沒有相容性問題。

缺點：顯而易見，即不能根據使用者的螢幕尺寸做出不同的表現。

目前，大部分門戶網站、大部分企業的PC宣傳站點都采用了這種布局方式。固定像素尺寸的網頁是比對固定像素尺寸顯示器的最簡單辦法。但這種方法不是一種完全相容未來網頁的制作方法，我們需要一些适應未知裝置的方法。

二、流式布局（Liquid Layout）

流式布局（Liquid）的特點（也叫"Fluid") 是頁面元素的寬度按照螢幕分辨率進行适配調整，但整體布局不變。代表作栅欄系統（網格系統）。

網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設定網頁主體的寬度為80%，min-width為960px。圖檔也作類似處理（width:100%, max-width一般設定為圖檔本身的尺寸，防止被拉伸而失真）。

1、布局特點：螢幕分辨率變化時，頁面裡元素的大小會變化而但布局不變。【這就導緻如果螢幕太大或者太小都會導緻元素無法正常顯示】

2、設計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的适應各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。

這種布局方式在Web前端開發的早期曆史上，用來應對不同尺寸的PC螢幕（那時螢幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，是以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協調。

三、自适應布局（Adaptive Layout）

自适應布局的特點是分别為不同的螢幕分辨率定義布局，即建立多個靜态布局，每個靜态布局對應一個螢幕分辨率範圍。改變螢幕分辨率可以切換不同的靜态局部（頁面元素位置發生改變），但在每個靜态布局中，頁面元素不随視窗大小的調整發生變化。可以把自适應布局看作是靜态布局的一個系列。

1、布局特點：螢幕分辨率變化時，頁面裡面元素的位置會變化而大小不會變化。

2、設計方法：使用 @media 媒體查詢給不同尺寸和媒體的裝置切換不同的樣式。在優秀的響應範圍設計下可以給适配範圍内的裝置最好的體驗，在同一個裝置下實際還是固定的布局。

四、響應式布局（Responsive Layout）

随着CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目标是確定一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web浏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實作上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術使用。——分别為不同的螢幕分辨率定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度随着視窗調整而自動适配。即：建立多個流體式布局，分别對應一個螢幕分辨率範圍。可以把響應式布局看作是流式布局和自适應布局設計理念的融合。

響應式幾乎已經成為優秀頁面布局的标準。

1、布局特點：每個螢幕分辨率下面會有一個布局樣式，即元素位置和大小都會變。

2、設計方法：媒體查詢+流式布局。通常使用 @media 媒體查詢 和網格系統 (Grid System) 配合相對布局機關進行布局，實際上就是綜合響應式、流動等上述技術通過 CSS 給單一網頁不同裝置傳回不同樣式的技術統稱。

優點：适應pc和移動端，如果足夠耐心，效果完美

缺點：（1）媒體查詢是有限的，也就是可以枚舉出來的，隻能适應主流的寬高。（2）要比對足夠多的螢幕大小，工作量不小，設計也需要多個版本。

 View Code

總結：

響應式與自适應的原理是相似的，都是檢測裝置，根據不同的裝置采用不同的css，而且css都是采用的百分比的，而不是固定的寬度，不同點是響應式的模闆在不同的裝置上看上去是不一樣的，會随着裝置的改變而改變展示樣式，而自适應不會，所有的裝置看起來都是一套的模闆，不過是長度或者圖檔變小了，不會根據裝置采用不同的展示樣式，流式就是采用了一些設定，當寬度大于多少時怎麼展示，小于多少時怎麼展示，而且展示的方式向水流一樣，一部分一部分的加載，靜态的就是采用固定寬度的了。

流式布局是用于解決類似的裝置不同分辨率之間的相容(一般分辨率差異較少)；響應式是用于解決不用裝置之間不用分辨率之間的相容問題(一般是指PC，平闆，手機等裝置之間較大的分辨率差異)。

如何實作響應式布局：折騰響應式布局設計，應運而生的web頁面響應布局

五、彈性布局（rem/em布局）

參考：流布局與響應式網頁設計有什麼差別？

1、rem,em差別：rem,em都是順應不同網頁字型大小展現而産生的。其中，em是相對其父元素，在實際應用中相對而言會帶來很多不便；而rem是始終相對于html大小，即頁面根元素。

2、使用 em 或 rem 機關進行相對布局，相對%百分比更加靈活，同時可以支援浏覽器的字型大小調整和縮放等的正常顯示，因為em是相對父級元素的原因沒有得到推廣。【中國站點制作網頁的時候，習慣用CSS強制定義字型大小，保證每個人都看到一緻的效果，包括網易、搜狐這些門戶網站在内的大部分站點，用的都是絕對機關px（像素）。但是，如果從網站易用性方面考慮，字型大小應該是可變的，一些視力不是那麼好的人需要放大字型才能看得清頁面内容。然而，占據大部分浏覽器市場的IE無法調整那些使用px作為機關的字型大小。國外人士非常重視網站的易用性，相當一部分外國站點已經使用em作為字型機關。】

3、這類布局的特點是，包裹文字的各元素的尺寸采用em/rem做機關，而頁面的主要劃分區域的尺寸仍使用百分數或px做機關（同「流式布局」或「靜态/固定布局」）。早期浏覽器不支援整個頁面按比例縮放，僅支援網頁内文字尺寸的放大，這種情況下。使用em/rem做機關，可以使包裹文字的元素随着文字的縮放而縮放。

4、浏覽器的預設字型高度一般為

16px

，即1em:16px，但是 1:16 的比例不友善計算，為了使機關em/rem更直覺，CSS編寫者常常将頁面跟節點字型設為62.5%，比如選擇用rem控制字型時，先需要設定根節點html的字型大小，因為浏覽器預設字型大小16px*62.5%=10px。這樣1rem便是10px，友善了計算。

Set body font-size to 62.5% for Easier em Conversion:

If you would like to use relative units (em) for your font sizes, declaring 62.5% for the font-size property of the body will make it easier to convert px to em. By doing it this way, converting to em is a matter of dividing the px value by 10 (e.g. 24px = 2.4em).

那麼為什麼一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？

因為有些浏覽器預設的不是16px，或者使用者修改了浏覽器預設的字型大小（因浏覽器分辨率大小，視力，習慣等因素）。如果我們将其設定為10px，一定會影響在這些浏覽器上的效果，是以最好用絕大多數使用者預設的16作為基數 * 62.5% 得到我們需要的10px。

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.4rem;/*1.4 × 10px = 14px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}
           

實際項目設定成 font-size: 62.5%可能會出現問題，因為chrome不支援小于12px的字型，計算小于12px的時候，會預設取12px去計算，導緻chrome的em/rem計算不準确。

針對這個現象，可以嘗試設定html字型為100px，body 修正為16px，這樣 0.1rem 就是 10px，而body的字型仍然是預設大小，不影響未設定大小的元素的預設字型的大小。

5、用em/rem定義尺寸的另一個好處是更能适應縮進/以字型機關padding或margin／浏覽器設定字型尺寸等情況（因為em/rem相對于字型大小，會同步改變）。例如：p{ text-indent: 2em; }

6、使用rem機關的彈性布局在移動端也很受歡迎。

工具ViewtoREM：PX轉換到REM（自動預處理）

rem的定義：font size of the root element，rem是相對于根元素<html>來設定字型大小的，這就意味着，我們隻需要根據自己的需求在根元素确定一個參考值。

rem與em、px的差別：

px：像素，比較精确的機關，但不好做響應式布局

em：以父節點font-size大小為參考點，标準不統一，容易造成混亂

REM支援的浏覽器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8無法支援。

對于不同尺寸的螢幕，可以統一假設螢幕寬度為640px後編寫CSS（當然你也可以假定統一為320px）。此時，我們設定html元素的font-size為40px（同樣，隻是舉例），然後各處（元素尺寸、文字大小）使用rem作為機關，随後搭配媒體查詢或JS，根據螢幕的大小來動态控制html元素的font-size（特定螢幕尺寸下，html元素的font-size應當設定為何值，是使用這個方案時設計師和程式員需要反複考慮後确定的，以下試舉一段相關的CSS媒體查詢代碼），即可自動改變所有用rem定義尺寸的元素的大小（且CSS編寫者在腦中進行換算的計算過程比em簡單得多）。

 View Code

其實在移動端使用所謂的彈性布局，是比較勉強的。移動端彈性布局流行起來的原因歸根結底是rem機關對于（根據螢幕尺寸）調整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等後起之秀的機關，可以實作完美的流式布局（高度和文字大小都可以變得“流式”），彈性布局就不再必要了。詳細可參考：視區相關機關vw, vh..簡介以及可實際應用場景

以下優缺點參考：響應式設計和REM布局的對比（有疑問）

優點：理想狀态是所有螢幕的高寬比和最初的設計高寬比一樣，或者相差不多，完美适應。

缺點：這種rem+js隻不過是寬度自适應，高度沒有做到自适應，一些對高度，或者元素間距要求比較高的設計，則這種布局沒有太大的意義。如果隻是寬度自适應，更推薦響應式設計。

響應式和彈性布局之間的對比：

響應式布局：改變浏覽器寬度，“布局”會随之變化，不是一成不變的，例如導航欄在大螢幕下是橫排，在小螢幕下是豎排，在超小螢幕下隐藏為菜單，也就是說如果有足夠的耐心，在每一種螢幕下都應該有合理的布局，完美的效果。

rem布局：改變浏覽器寬度，頁面所有元素的高寬都等比例縮放，也就是大螢幕下導航是橫的，小螢幕下還是橫的隻不過變小了。

結論：

1.如果隻做pc端，那麼靜态布局（定寬度）是最好的選擇；

2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，一份css+一份js調節font-size搞定；

3.如果pc，移動要相容，而且要求很高那麼響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據媒體查詢做不同的布局。