1、靜態(tài)布局（Static Layout）

即傳統(tǒng)Web設(shè)計(jì)，對(duì)于PC設(shè)計(jì)一個(gè)Layout，在屏幕寬高有調(diào)整時(shí)，使用橫向和豎向的滾動(dòng)條來(lái)查閱被遮掩部分； 
意思就是不管瀏覽器尺寸具體是多少，網(wǎng)頁(yè)布局就按照當(dāng)時(shí)寫(xiě)代碼的布局來(lái)布置； 
對(duì)于移動(dòng)設(shè)備，單獨(dú)設(shè)計(jì)一個(gè)布局，使用不同的域名如wap.或m.。

2、彈性布局

彈性布局是CSS3引入的強(qiáng)大的布局方式，用來(lái)替代以前Web開(kāi)發(fā)人員使用的一些復(fù)雜而易錯(cuò)hacks方法（如使用float進(jìn)行類似流式布局）。

其中flex-flow是flex-direction和flex-wrap屬性的簡(jiǎn)寫(xiě)方式，語(yǔ)法如下：

flex-flow: <flex-direction> || <flex-wrap>

flex-direction: row（初始值） | row-reverse | column | column-reverse

flex-wrap: nowrap（初始值） | wrap | wrap-reverse

flex-direction定義了彈性項(xiàng)目在彈性容器中的放置方向，默認(rèn)是row，即行內(nèi)方向（一般而言是由左往右，但注意這個(gè)和書(shū)寫(xiě)模式有關(guān)）。

flex-wrap定義是否需要拆行以使得彈性項(xiàng)目能被容器包含。*-reverse代表相反的方向。

兩者結(jié)合起來(lái)即flex-flow屬性就確定了彈性容器在main axis和cross axis兩個(gè)方向上的顯示方式，下面的例子很直觀的說(shuō)明了各個(gè)屬性值的區(qū)別：

3、自適應(yīng)布局（Adaptive Layout）

自適應(yīng)布局（Adaptive）的特點(diǎn)是分別為不同的屏幕分辨率定義布局。布局切換時(shí)頁(yè)面元素發(fā)生改變，但在每個(gè)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。 
你可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列。 
就是說(shuō)你看到的頁(yè)面，里面元素的位置會(huì)變化而大小不會(huì)變化；

4、流式布局（Liquid Layout）

流式布局（Liquid）的特點(diǎn)（也叫”Fluid”) 是頁(yè)面元素的寬度按照屏幕進(jìn)行適配調(diào)整，主要的問(wèn)題是如果屏幕尺度跨度太大，那么在相對(duì)其原始設(shè)計(jì)而言過(guò)小或過(guò)大的屏幕上不能正常顯示 
。 
你看到的頁(yè)面，元素的大小會(huì)變化而位置不會(huì)變化——這就導(dǎo)致如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示。

5、響應(yīng)式布局（Responsive Layout）

分別為不同的屏幕分辨率定義布局，同時(shí)，在每個(gè)布局中，應(yīng)用流式布局的理念，即頁(yè)面元素寬度隨著窗口調(diào)整而自動(dòng)適配。 
可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合。 
每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，同時(shí)位置會(huì)變而且大小也會(huì)變。

二 響應(yīng)式布局步驟

1.布局及設(shè)置meta標(biāo)簽

當(dāng)創(chuàng)建一個(gè)響應(yīng)式網(wǎng)站，或者非響應(yīng)式網(wǎng)站變成響應(yīng)式的時(shí)候，首先要關(guān)注元素的布局。我在創(chuàng)建響應(yīng)式布局的時(shí)候習(xí)慣先寫(xiě)非響應(yīng)式布局，頁(yè)面固定寬度大小，我覺(jué)得這個(gè)對(duì)在座的各位沒(méi)有任何難度。如果完成了非響應(yīng)式那么我在去添加媒體查詢（Media Query)和響應(yīng)式代碼。這種操作更容易實(shí)現(xiàn)響應(yīng)式特性。

當(dāng)你完成當(dāng)你已經(jīng)完成了無(wú)響應(yīng)的網(wǎng)站，做的第一件事是在你的 HTML 頁(yè)面，粘貼下面的代碼到和標(biāo)簽之間。這將設(shè)置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機(jī)的瀏覽器提供網(wǎng)站全視圖瀏覽，并禁止用戶縮放頁(yè)面。

<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">
1
2
3

user-scalable屬性能夠解決ipad切換橫屏之后觸摸才能回到具體尺寸的問(wèn)題。

2.通過(guò)媒體查詢來(lái)設(shè)置樣式media query

media query 是響應(yīng)式設(shè)計(jì)的核心，它能夠和瀏覽器進(jìn)行溝通，告訴瀏覽器頁(yè)面如何呈現(xiàn)，假如一個(gè)終端的分辨率小于980px，那么可以這樣寫(xiě)

 @media screen and (max-width:980px){
     #head { … }
     #content { … }
     #footer { … }
1
2
3
4

} 
這里面的樣式會(huì)覆蓋掉之前所定義的樣式。

3.設(shè)置多種視圖寬度

假如我們要兼容ipad和iphone視圖，我們可以這樣設(shè)置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px)and (width:768px){}
1
2
3
4

3.字體設(shè)置

到目前為止，開(kāi)發(fā)人員用到的字體單位大部分都是像素，雖然像素在普通網(wǎng)站上是Ok的，但是我們?nèi)匀恍枰憫?yīng)式字體。一個(gè)響應(yīng)式的字體應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣才能適應(yīng)客戶端屏幕。

css3引入了新的單位叫做rem,和em類似但對(duì)于Html元素，rem更方便使用。

rem是相對(duì)于根元素的，不要忘記重置根元素字體大?。?/p>

html{font-size:100%;}
完成后，你可以定義響應(yīng)式字體：
@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的童鞋，在這里給大家推薦一篇寫(xiě)的不錯(cuò)的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
1
2
3
4
5
6

4.響應(yīng)式設(shè)計(jì)需要注意的問(wèn)題

1.寬度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}
1
2

2.圖片處理

在這里我給大家一把鑰匙,有人會(huì)說(shuō)，博主，能不能別裝逼？圖片處理還有啥鑰匙，你以為是開(kāi)門(mén)啊，博主，醒醒吧

哎喲 ，我這暴脾氣，我說(shuō)的鑰匙不是真的鑰匙，而是指圖片處理的萬(wàn)能方法，是什么呢？就是圖片液態(tài)化。接著 會(huì)有人問(wèn)：“什么是圖片液態(tài)化”呢？這個(gè)問(wèn)題問(wèn)的很好，給你打99分，多給你一分怕你驕傲，大家都知道水無(wú)形 能適合很多容器，那么假如我們把圖片當(dāng)做水 是不是就可以實(shí)現(xiàn)圖片自適應(yīng)問(wèn)題了呢？

在html頁(yè)面中的圖片，比如文章里插入的圖片我們都可以通過(guò)css樣式max-width來(lái)進(jìn)行控制圖片的最大寬度，如：

#wrap img{
    max-width:100%;
    height:auto;
}
如此設(shè)置后ID為wrap內(nèi)的圖片會(huì)根據(jù)wrap的寬度改變已達(dá)到等寬擴(kuò)充，height為auto的設(shè)置是為了保證圖片原始的高寬比例，以至于圖片不會(huì)失真。

除了img標(biāo)簽的圖片外我們經(jīng)常會(huì)遇到背景圖片，比如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的新屬性，用于設(shè)置背景圖片的大小，有兩個(gè)可選值，第一個(gè)值用于指定背景圖的width,第2個(gè)值用于指定背景圖的height,如果只指定一個(gè)值，那么另一個(gè)值默認(rèn)為auto。
background-size:cover; 等比擴(kuò)展圖片來(lái)填滿元素
background-size:contain; 等比縮小圖片來(lái)適應(yīng)元素的尺寸

最后我們來(lái)總結(jié)下響應(yīng)式布局的實(shí)現(xiàn)原理 
首先我們應(yīng)該遵循移動(dòng)端優(yōu)先，交互和設(shè)計(jì)以移動(dòng)端為主，pc則作為移動(dòng)端的擴(kuò)展，一個(gè)頁(yè)面需要兼容不同終端，那么有兩個(gè)關(guān)鍵點(diǎn)是我們需要去做到響應(yīng)式的：響應(yīng)式布局和響應(yīng)式內(nèi)容（圖片、多媒體） 
1.響應(yīng)式布局 
1.Meta標(biāo)簽定義 
2.使用Media Queries適配對(duì)應(yīng)樣式 
2.響應(yīng)式內(nèi)容 
1.響應(yīng)式圖片

2、自適應(yīng)布局（Adaptive Layout）

自適應(yīng)布局（Adaptive）的特點(diǎn)是分別為不同的屏幕分辨率定義布局。布局切換時(shí)頁(yè)面元素發(fā)生改變，但在每個(gè)布局中，頁(yè)面元素不隨窗口大小的調(diào)整發(fā)生變化。 
你可以把自適應(yīng)布局看作是靜態(tài)布局的一個(gè)系列。 
就是說(shuō)你看到的頁(yè)面，里面元素的位置會(huì)變化而大小不會(huì)變化；

3、流式布局（Liquid Layout）

流式布局（Liquid）的特點(diǎn)（也叫”Fluid”) 是頁(yè)面元素的寬度按照屏幕進(jìn)行適配調(diào)整，主要的問(wèn)題是如果屏幕尺度跨度太大，那么在相對(duì)其原始設(shè)計(jì)而言過(guò)小或過(guò)大的屏幕上不能正常顯示 
。 
你看到的頁(yè)面，元素的大小會(huì)變化而位置不會(huì)變化——這就導(dǎo)致如果屏幕太大或者太小都會(huì)導(dǎo)致元素?zé)o法正常顯示。

4、響應(yīng)式布局（Responsive Layout）

分別為不同的屏幕分辨率定義布局，同時(shí)，在每個(gè)布局中，應(yīng)用流式布局的理念，即頁(yè)面元素寬度隨著窗口調(diào)整而自動(dòng)適配。 
可以把響應(yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計(jì)理念的融合。 
每個(gè)屏幕分辨率下面會(huì)有一個(gè)布局樣式，同時(shí)位置會(huì)變而且大小也會(huì)變。

二 響應(yīng)式布局步驟

1.布局及設(shè)置meta標(biāo)簽

當(dāng)創(chuàng)建一個(gè)響應(yīng)式網(wǎng)站，或者非響應(yīng)式網(wǎng)站變成響應(yīng)式的時(shí)候，首先要關(guān)注元素的布局。我在創(chuàng)建響應(yīng)式布局的時(shí)候習(xí)慣先寫(xiě)非響應(yīng)式布局，頁(yè)面固定寬度大小，我覺(jué)得這個(gè)對(duì)在座的各位沒(méi)有任何難度。如果完成了非響應(yīng)式那么我在去添加媒體查詢（Media Query)和響應(yīng)式代碼。這種操作更容易實(shí)現(xiàn)響應(yīng)式特性。

當(dāng)你完成當(dāng)你已經(jīng)完成了無(wú)響應(yīng)的網(wǎng)站，做的第一件事是在你的 HTML 頁(yè)面，粘貼下面的代碼到和標(biāo)簽之間。這將設(shè)置屏幕按1：1的尺寸顯示，在 iPhone 和其他智能手機(jī)的瀏覽器提供網(wǎng)站全視圖瀏覽，并禁止用戶縮放頁(yè)面。

<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">
1
2
3

user-scalable屬性能夠解決ipad切換橫屏之后觸摸才能回到具體尺寸的問(wèn)題。

2.通過(guò)媒體查詢來(lái)設(shè)置樣式media query

media query 是響應(yīng)式設(shè)計(jì)的核心，它能夠和瀏覽器進(jìn)行溝通，告訴瀏覽器頁(yè)面如何呈現(xiàn)，假如一個(gè)終端的分辨率小于980px，那么可以這樣寫(xiě)

 @media screen and (max-width:980px){
     #head { … }
     #content { … }
     #footer { … }
1
2
3
4

} 
這里面的樣式會(huì)覆蓋掉之前所定義的樣式。

3.設(shè)置多種視圖寬度

假如我們要兼容ipad和iphone視圖，我們可以這樣設(shè)置：

/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
 @media only screen and (width:320px)and (width:768px){}
1
2
3
4

3.字體設(shè)置

到目前為止，開(kāi)發(fā)人員用到的字體單位大部分都是像素，雖然像素在普通網(wǎng)站上是Ok的，但是我們?nèi)匀恍枰憫?yīng)式字體。一個(gè)響應(yīng)式的字體應(yīng)關(guān)聯(lián)它的父容器的寬度，這樣才能適應(yīng)客戶端屏幕。

css3引入了新的單位叫做rem,和em類似但對(duì)于Html元素，rem更方便使用。

rem是相對(duì)于根元素的，不要忘記重置根元素字體大?。?/p>

html{font-size:100%;}
完成后，你可以定義響應(yīng)式字體：
@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的童鞋，在這里給大家推薦一篇寫(xiě)的不錯(cuò)的博客(http://www.cnblogs.com/YYvam1288/p/5123272.html)
1
2
3
4
5
6

4.響應(yīng)式設(shè)計(jì)需要注意的問(wèn)題

1.寬度不固定，可以使用百分比

#head{width:100%;}
#content{width:50%;}
1
2

2.圖片處理

在這里我給大家一把鑰匙,有人會(huì)說(shuō)，博主，能不能別裝逼？圖片處理還有啥鑰匙，你以為是開(kāi)門(mén)啊，博主，醒醒吧

哎喲 ，我這暴脾氣，我說(shuō)的鑰匙不是真的鑰匙，而是指圖片處理的萬(wàn)能方法，是什么呢？就是圖片液態(tài)化。接著 會(huì)有人問(wèn)：“什么是圖片液態(tài)化”呢？這個(gè)問(wèn)題問(wèn)的很好，給你打99分，多給你一分怕你驕傲，大家都知道水無(wú)形 能適合很多容器，那么假如我們把圖片當(dāng)做水 是不是就可以實(shí)現(xiàn)圖片自適應(yīng)問(wèn)題了呢？

在html頁(yè)面中的圖片，比如文章里插入的圖片我們都可以通過(guò)css樣式max-width來(lái)進(jìn)行控制圖片的最大寬度，如：

#wrap img{
    max-width:100%;
    height:auto;
}
如此設(shè)置后ID為wrap內(nèi)的圖片會(huì)根據(jù)wrap的寬度改變已達(dá)到等寬擴(kuò)充，height為auto的設(shè)置是為了保證圖片原始的高寬比例，以至于圖片不會(huì)失真。

除了img標(biāo)簽的圖片外我們經(jīng)常會(huì)遇到背景圖片，比如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的新屬性，用于設(shè)置背景圖片的大小，有兩個(gè)可選值，第一個(gè)值用于指定背景圖的width,第2個(gè)值用于指定背景圖的height,如果只指定一個(gè)值，那么另一個(gè)值默認(rèn)為auto。
background-size:cover; 等比擴(kuò)展圖片來(lái)填滿元素
background-size:contain; 等比縮小圖片來(lái)適應(yīng)元素的尺寸

最后我們來(lái)總結(jié)下響應(yīng)式布局的實(shí)現(xiàn)原理 
首先我們應(yīng)該遵循移動(dòng)端優(yōu)先，交互和設(shè)計(jì)以移動(dòng)端為主，pc則作為移動(dòng)端的擴(kuò)展，一個(gè)頁(yè)面需要兼容不同終端，那么有兩個(gè)關(guān)鍵點(diǎn)是我們需要去做到響應(yīng)式的：響應(yīng)式布局和響應(yīng)式內(nèi)容（圖片、多媒體） 
1.響應(yīng)式布局 
1.Meta標(biāo)簽定義 
2.使用Media Queries適配對(duì)應(yīng)樣式 
2.響應(yīng)式內(nèi)容 
1.響應(yīng)式圖片