隨著越來越多不同解析度和大小的顯示器終端出現在市場上，原先用一個板式的web頁面設計和佈局來應對所有設備的做法遇到了越來越多的問題，針對寬屏設備開發的頁面在手機或者pad上佈局會產生各種錯位或者Bug，大幅度降低了用戶體驗。 響應式佈局就是為了應對這樣的情況而出現的一種設計方式，其核心理念是在不同的 ...
隨著越來越多不同解析度和大小的顯示器終端出現在市場上，原先用一個板式的web頁面設計和佈局來應對所有設備的做法遇到了越來越多的問題，針對寬屏設備開發的頁面在手機或者pad上佈局會產生各種錯位或者Bug，大幅度降低了用戶體驗。
響應式佈局就是為了應對這樣的情況而出現的一種設計方式，其核心理念是在不同的設備寬度上應用不同的樣式和設計。Responsive web design（RWD）：的基本設計思路是：
1、採用 CSS 的 media query 技術
2、流體佈局（ fluid grids ）
3、自適應的圖片/視頻等資源素材
此外，記得帶上常常使用的標簽：
<link type="text/css" rel="stylesheet" href="css/normalize.css">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0">
<meta http-equiv=X-UA-Compatible content="IE=edge">
1、基於多大的模板？
目前的web開發一般基於pc端，顯示器的尺寸一般在13寸以上，因此模板的大小往往超過1200px，而蘋果手機的顯示器寬度在320px，為了適應這種寬度的變化，網頁在設計時必須考慮到寬度在320px-1200px時網頁排版有可能發生的各種變化。
在有專門的設計師或者美工時，可以根據他的設計圖來進行不同頁面的開發，比如根據1200px寬度、800px和320px寬度下的設計圖進行頁面開發。
2、對頁面的不同部分進行修改？
可以將頁面分為頭部、主體和頁腳三個部分，每個部分對解析度的變化的反應程度可以有所不同，比如頭部可以在320 480 800時分別擁有不同的佈局，而主體在600和1000時分別有各自的佈局，這是沒有問題的。
3、解析度單位
前端在開發的時候常常要和三種像素單位打交道，rem em和px。下麵來介紹一下三種解析度的不同：
PX
px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕解析度而言的。
PX特點
1. IE無法調整那些使用px作為單位的字體大小；
2. 國外的大部分網站能夠調整的原因在於其使用了em或rem作為字體單位；
3. Firefox能夠調整px和em，rem，但是96%以上的中國網民使用IE瀏覽器(或內核)。
EM
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的預設字體尺寸。
EM特點
1. em的值並不是固定的；
2. em會繼承父級元素的字體大小。
註意：任意瀏覽器的預設字體高都是16px。所有未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。為了簡化font-size的換算，需要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變為 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只需要將你的原來的px數值除以10，然後換上em作為單位就行了。
所以我們在寫CSS的時候，需要註意兩點：
1. body選擇器中聲明Font-size=62.5%；
2. 將你的原來的px數值除以10，然後換上em作為單位；
3. 重新計算那些被放大的字體的em數值。避免字體大小的重覆聲明。
也就是避免1.2 * 1.2= 1.44的現象。比如說你在#content中聲明瞭字體大小為1.2em，那麼在聲明p的字體大小時就只能是1em，而不是1.2em, 因為此em非彼em，它因繼承#content的字體高而變為了1em=12px。
REM
rem是CSS3新增的一個相對單位（root em，根em），這個單位引起了廣泛關註。這個單位與em有什麼區別呢？區別在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。下麵就是一個例子：
p {font-size:14px; font-size:.875rem;}
註意： 選擇使用什麼字體單位主要由你的項目來決定，如果你的用戶群都使用最新版的瀏覽器，那推薦使用rem，如果要考慮相容性，那就使用px,或者兩者同時使用。
px 與 rem 的選擇？
對於只需要適配少部分手機設備，且解析度對頁面影響不大的，使用px即可 。
對於需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等解析度差別比較挺大的設備。
來源：http://www.runoob.com/w3cnote/px-em-rem-different.html
由於這樣的差別，我們在製作響應式佈局頁面的時候，應該優先選擇相對根大小的rem單位了，在html中將font-size設置為62.5%， 這樣1rem就和10px等值了。
4、自適應佈局
在製作響應式佈局時，我們往往會使用自適應的佈局，因為目前移動端設備五花八門，屏幕的寬度也沒有統一標準，因此可以隨著屏幕拉伸改變寬度的自適應的頁面肯定要由於固態寬度的佈局。
那麼在製作自適應的佈局時，要儘量避免使用固定困高，而是用百分比寬高，在多列佈局時可以用calc() 來對內容進行佈局，如calc(%50 - 20rem)；也可以對子元素進行佈局，比如div中進行三列佈局時，可以設置每個子元素的大小為calc(100%/3)，此時要註意，一定要在父元素中設置font-size:0，如若不然，子元素之間的空白符會被計算成字元單位，從而使子元素之間產生空隙，導致錯位。
對於一些希望使其浮動的元素，也可以用display:inline-block 來代替float:left；希望圖片等元素居中時，可以設置display為block，之後設置margin為 0 auto 。
5、media query
媒體查詢可以說是響應式佈局的核心，語法為：
@media only screen and (max-width: 50em){
[Content]
}
也就是在屏幕寬度為800px(50*16)是，頁面採取該樣式，花括弧中的樣式會覆蓋預設的樣式，但是不會進行重寫，因此對需要的屬性進行操作即可。要註意的地方是，這裡儘量使用em而不是rem單位，這裡的數值和單位由於是讀取瀏覽器的，不收到html 或者 body中font-size的影響，換算比例始終為1:16 。
6、自適應圖片
用srcset屬性或者picture標簽，來對不同位置的圖片使用不同解析度的文件。
