一理解幾種佈局的概念
1、靜態佈局（Static Layout）
即傳統Web設計，對於PC設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫代碼的佈局來佈置；
對於移動設備，單獨設計一個佈局，使用不同的域名如wap.或m.。
2、彈性佈局
彈性佈局是CSS3引入的強大的佈局方式，用來替代以前Web開發人員使用的一些複雜而易錯hacks方法（如使用float進行類似流式佈局）。
其中flex-flow是flex-direction和flex-wrap屬性的簡寫方式，語法如下：
flex-flow: <flex-direction> || <flex-wrap>
flex-direction: row（初始值） | row-reverse | column | column-reverse
flex-wrap: nowrap（初始值） | wrap | wrap-reverse
flex-direction定義了彈性項目在彈性容器中的放置方向，默認是row，即行內方向（一般而言是由左往右，但注意這個和書寫模式有關）。
flex-wrap定義是否需要拆行以使得彈性項目能被容器包含。*-reverse代表相反的方向。
兩者結合起來即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個方向上的顯示方式，下面的例子很直觀的說明了各個屬性值的區別：
3、自適應佈局（Adaptive Layout）
自適應佈局（Adaptive）的特點是分別爲不同的屏幕分辨率定義佈局。佈局切換時頁面元素髮生改變，但在每個佈局中，頁面元素不隨窗口大小的調整發生變化。
你可以把自適應佈局看作是靜態佈局的一個系列。
就是說你看到的頁面，裏面元素的位置會變化而大小不會變化；
4、流式佈局（Liquid Layout）
流式佈局（Liquid）的特點（也叫”Fluid”) 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示
。
你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
5、響應式佈局（Responsive Layout）
做手機網站必加的一句頭部(head)代碼
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
name="viewport" 名稱=視圖
width=device-width 頁面寬度=設備寬度(可以理解爲獲取你手機的屏幕寬度)
initial-scale - 初始的縮放比例
minimum-scale - 允許用戶縮放到的最小比例
maximum-scale - 允許用戶縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
分別爲不同的屏幕分辨率定義佈局，同時，在每個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。
可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合。
每個屏幕分辨率下面會有一個佈局樣式，同時位置會變而且大小也會變。
二 響應式佈局步驟
1.佈局及設置meta標籤
當創建一個響應式網站，或者非響應式網站變成響應式的時候，首先要關注元素的佈局。我在創建響應式佈局的時候習慣先寫非響應式佈局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那麼我在去添加媒體查詢（Media Query)和響應式代碼。這種操作更容易實現響應式特性。
當你完成當你已經完成了無響應的網站，做的第一件事是在你的 HTML 頁面，粘貼下面的代碼到和標籤之間。這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網站全視圖瀏覽，並禁止用戶縮放頁面。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
user-scalable屬性能夠解決ipad切換橫屏之後觸摸才能回到具體尺寸的問題。
2.通過媒體查詢來設置樣式media query
media query 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如一個終端的分辨率小於980px，那麼可以這樣寫
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}
這裏面的樣式會覆蓋掉之前所定義的樣式。
3.設置多種視圖寬度
假如我們要兼容ipad和iphone視圖，我們可以這樣設置：
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}
3.字體設置
到目前爲止，開發人員用到的字體單位大部分都是像素，雖然像素在普通網站上是Ok的，但是我們仍然需要響應式字體。一個響應式的字體應關聯它的父容器的寬度，這樣才能適應客戶端屏幕。
css3引入了新的單位叫做rem,和em類似但對於Html元素，rem更方便使用。
rem是相對於根元素的，不要忘記重置根元素字體大小：
html{font-size:100%;}
完成後，你可以定義響應式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
不理解rem的童鞋，在這裏給大家推薦一篇寫的不錯的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
4.響應式設計需要注意的問題
1.寬度不固定，可以使用百分比
#head{width:100%;}
#content{width:50%;}
2.圖片處理
在這裏我給大家一把鑰匙,有人會說，博主，能不能別裝逼？圖片處理還有啥鑰匙，你以爲是開門啊，博主，醒醒吧
哎喲 ，我這暴脾氣，我說的鑰匙不是真的鑰匙，而是指圖片處理的萬能方法，是什麼呢？就是圖片液態化。接着 會有人問：“什麼是圖片液態化”呢？這個問題問的很好，給你打99分，多給你一分怕你驕傲，大家都知道水無形 能適合很多容器，那麼假如我們把圖片當做水 是不是就可以實現圖片自適應問題了呢？
在html頁面中的圖片，比如文章裏插入的圖片我們都可以通過css樣式max-width來進行控制圖片的最大寬度，如：
#wrap img{
max-width:100%;
height:auto;
}
如此設置後ID爲wrap內的圖片會根據wrap的寬度改變已達到等寬擴充，height爲auto的設置是爲了保證圖片原始的高寬比例，以至於圖片不會失真。
除了img標籤的圖片外我們經常會遇到背景圖片，比如logo爲背景圖片：
#log a{display:block;
width:100%;
height:40px;
text-indent:55rem;
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}
background-size是css3的新屬性，用於設置背景圖片的大小，有兩個可選值，第一個值用於指定背景圖的width,第2個值用於指定背景圖的height,如果只指定一個值，那麼另一個值默認爲auto。
background-size:cover; 等比擴展圖片來填滿元素
background-size:contain; 等比縮小圖片來適應元素的尺寸
最後我們來總結下響應式佈局的實現原理
首先我們應該遵循移動端優先，交互和設計以移動端爲主，pc則作爲移動端的擴展，一個頁面需要兼容不同終端，那麼有兩個關鍵點是我們需要去做到響應式的：響應式佈局和響應式內容（圖片、多媒體）
1.響應式佈局
2.Meta標籤定義
3.使用Media Queries適配對應樣式
4.響應式內容
5.響應式圖片
2、自適應佈局（Adaptive Layout）
自適應佈局（Adaptive）的特點是分別爲不同的屏幕分辨率定義佈局。佈局切換時頁面元素髮生改變，但在每個佈局中，頁面元素不隨窗口大小的調整發生變化。
你可以把自適應佈局看作是靜態佈局的一個系列。
就是說你看到的頁面，裏面元素的位置會變化而大小不會變化；
3、流式佈局（Liquid Layout）
流式佈局（Liquid）的特點（也叫”Fluid”) 是頁面元素的寬度按照屏幕進行適配調整，主要的問題是如果屏幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的屏幕上不能正常顯示
。你看到的頁面，元素的大小會變化而位置不會變化——這就導致如果屏幕太大或者太小都會導致元素無法正常顯示。
4、響應式佈局（Responsive Layout）
分別爲不同的屏幕分辨率定義佈局，同時，在每個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。
可以把響應式佈局看作是流式佈局和自適應佈局設計理念的融合。
每個屏幕分辨率下面會有一個佈局樣式，同時位置會變而且大小也會變。
二 響應式佈局步驟
1.佈局及設置meta標籤
當創建一個響應式網站，或者非響應式網站變成響應式的時候，首先要關注元素的佈局。我在創建響應式佈局的時候習慣先寫非響應式佈局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完成了非響應式那麼我在去添加媒體查詢（Media Query)和響應式代碼。這種操作更容易實現響應式特性。
當你完成當你已經完成了無響應的網站，做的第一件事是在你的 HTML 頁面，粘貼下面的代碼到和標籤之間。這將設置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機的瀏覽器提供網站全視圖瀏覽，並禁止用戶縮放頁面。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
user-scalable屬性能夠解決ipad切換橫屏之後觸摸才能回到具體尺寸的問題。
2.通過媒體查詢來設置樣式media query
media query 是響應式設計的核心，它能夠和瀏覽器進行溝通，告訴瀏覽器頁面如何呈現，假如一個終端的分辨率小於980px，那麼可以這樣寫
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}
這裏面的樣式會覆蓋掉之前所定義的樣式。
3.設置多種視圖寬度
假如我們要兼容ipad和iphone視圖，我們可以這樣設置：
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}
3.字體設置
到目前爲止，開發人員用到的字體單位大部分都是像素，雖然像素在普通網站上是Ok的，但是我們仍然需要響應式字體。一個響應式的字體應關聯它的父容器的寬度，這樣才能適應客戶端屏幕。
css3引入了新的單位叫做rem,和em類似但對於Html元素，rem更方便使用。
rem是相對於根元素的，不要忘記重置根元素字體大小：
html{font-size:100%;}
完成後，你可以定義響應式字體：
@media (min-width:640px){body{font-size:1rem;}}
@media (min-width:960px){body{font-size:1.2rem;}}
@media (min-width:1200px){body{font-size:1.5rem;}}
不理解rem的童鞋，在這裏給大家推薦一篇寫的不錯的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
4.響應式設計需要注意的問題
1.寬度不固定，可以使用百分比
#head{width:100%;}
#content{width:50%;}
2.圖片處理
在這裏我給大家一把鑰匙,有人會說，博主，能不能別裝逼？圖片處理還有啥鑰匙，你以爲是開門啊，博主，醒醒吧
哎喲 ，我這暴脾氣，我說的鑰匙不是真的鑰匙，而是指圖片處理的萬能方法，是什麼呢？就是圖片液態化。接着 會有人問：“什麼是圖片液態化”呢？這個問題問的很好，給你打99分，多給你一分怕你驕傲，大家都知道水無形 能適合很多容器，那麼假如我們把圖片當做水 是不是就可以實現圖片自適應問題了呢？
在html頁面中的圖片，比如文章裏插入的圖片我們都可以通過css樣式max-width來進行控制圖片的最大寬度，如：
#wrap img{
max-width:100%;
height:auto;
}
如此設置後ID爲wrap內的圖片會根據wrap的寬度改變已達到等寬擴充，height爲auto的設置是爲了保證圖片原始的高寬比例，以至於圖片不會失真。
除了img標籤的圖片外我們經常會遇到背景圖片，比如logo爲背景圖片：
#log a{display:block;
width:100%;
height:40px;
text-indent:55rem;
background-img:url(logo.png);
background-repeat:no-repeat;
background-size:100% 100%;
}
background-size是css3的新屬性，用於設置背景圖片的大小，有兩個可選值，第一個值用於指定背景圖的width,第2個值用於指定背景圖的height,如果只指定一個值，那麼另一個值默認爲auto。
background-size:cover; 等比擴展圖片來填滿元素
background-size:contain; 等比縮小圖片來適應元素的尺寸