1.自適應網頁
1.聲明viewport元標籤
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes/no">
注：width=device-width 讓寬度爲設備寬度
initial-scale=1 設置初始縮放比例
user-scalable=no 設置用戶是否可以手動縮放
2.使用流式佈局
實現方案：float:left
display:inline-block;
彈性佈局 display:flex;
3.所有容器使用相對尺寸(%)，所有文字使用相對尺寸(rem/em)，所有圖片使用相對尺寸(將圖片設置爲響應式圖片max-width:100%;height:auto)
4.CSS3媒體查詢技術
媒體查詢技術兩種使用方法：
1.根據媒體查詢結果執行不同的外部CSS文件(不推薦使用)
<link media="screen and (min-width:768px) and (max-width:996px)" rel="stylesheet" href="css/screen_pad.css">
此方法不推薦使用，因爲瀏覽器會請求不符合條件的外部CSS文件，影響效率
2.根據媒體查詢結果執行css片段中不同的選擇器(推薦)
@media screen and (min-width:768px ) and (max-width:996px){
選擇器樣式設定
}
5.框架(bootstrap)
2.響應式應用遇到的問題
1.用百分比實現響應式時出現的問題
1.在設置好樣式後，當縮小或放大瀏覽器窗口，或者是將手機橫屏後，佈局會亂，刷新後佈局又好了。
原因：網頁加載後，css已經渲染到頁面，將手機橫屏後，雖然寬度已經改變，但是CSS已渲染成功，無法改變，導致佈局會亂。
解決方法：
1.添加js事件，監聽屏幕尺寸變化事件(resize事件)，在屏幕變化時重新加載頁面(reload)。此方法存在問題，就是在頁面上已經輸入的表單文字或者其他在網頁刷新時會清空。(不推薦使用)
2.添加js事件，監聽屏幕尺寸變化事件(resize事件)，獲取當前屏幕寬度，動態設置根元素的寬度爲屏幕寬度。
2.百分比設置響應式時，不同像素的百分比相差很大。比如1920px屏幕和800px的屏幕，用相同百分比設置頁面時，差距很大，頁面效果很差。所以，應配合媒體查詢技術，配置不同分辨率的百分比。
3.用百分比設置頁面時，如果頁面無限縮小後，一些字或者圖片或者圖表等會產生堆疊，所以建議設置最外層容器的最小寬度min-width爲一個固定像素的值(如：min-width:800px)，當屏幕寬度達到800時將產生滾動條，不會發生堆疊，可提升用戶體驗
3.彈性佈局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 這篇博客解釋的很好，大家可以看看
CSS中常見佈局方式
1.利用表格佈局
表格佈局是一種很古老的佈局方式，瀏覽器在渲染表格時，會進行大量計算，影響效率，不推薦使用
2.盒狀模型
依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。而且盒狀模型會產生一些問題，例如子元素全浮動，會導致父元素無高度。外邊距溢出等問題。雖然可以 解決，但是一不留心就不出現問題。
3.彈性佈局
1.簡單，好理解，易於使用
2.支持響應式
3.目前大部分瀏覽器均支持。
Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+
任何一個容器都可以指定爲flex佈局，行內元素也可以使用flex佈局，Webkit內核需加-webkit-前綴 ： display:-webkit-flex;
display:flex;
display:inline-flex;
注意，設爲 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。
容器的屬性：
flex-direction: row|row-reverse|column|column-reverse;決定項目的排列方向
flex-wrap: flex-wrap: nowrap | wrap | wrap-reverse;項目多時決定項目是否換行
flex-flow: flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
justify-content: flex-start左對齊
| flex-end 右對齊
| center 居中
| space-between 兩端對齊，項目之間的間隔都相等。
| space-around 每個項目兩側的間隔相等。
決定了項目主軸對齊的方式
align-items: flex-start 交叉軸的起點對齊。
| flex-end 交叉軸的終點對齊。
| center 交叉軸的中點對齊。
| baseline 項目的第一行文字的基線對齊。
| stretch 如果項目未設置高度或設爲auto，將佔滿整個容器的高度。
定義項目在交叉軸上如何對齊。
align-content: flex-start 與交叉軸的起點對齊。
| flex-end 與交叉軸的終點對齊。
| center 與交叉軸的中點對齊。
| space-between 與交叉軸兩端對齊，軸線之間的間隔平均分佈。
| space-around 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
| stretch 軸線佔滿整個交叉軸。
定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
項目的屬性：
order:數值。數值越小排列越靠前
flex-grow：數值，屬性定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大
flex-shrink：數值，屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。
flex-basis：它可以設爲跟width或height屬性一樣的值（比如350px），則項目將佔據固定空間。
flex：flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
align-self：屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
| auto
| flex-start
| flex-end
| center
| baseline
| stretch;
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
1.聲明viewport元標籤
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=yes/no">
注：width=device-width 讓寬度爲設備寬度
initial-scale=1 設置初始縮放比例
user-scalable=no 設置用戶是否可以手動縮放
2.使用流式佈局
實現方案：float:left
display:inline-block;
彈性佈局 display:flex;
3.所有容器使用相對尺寸(%)，所有文字使用相對尺寸(rem/em)，所有圖片使用相對尺寸(將圖片設置爲響應式圖片max-width:100%;height:auto)
4.CSS3媒體查詢技術
媒體查詢技術兩種使用方法：
1.根據媒體查詢結果執行不同的外部CSS文件(不推薦使用)
<link media="screen and (min-width:768px) and (max-width:996px)" rel="stylesheet" href="css/screen_pad.css">
此方法不推薦使用，因爲瀏覽器會請求不符合條件的外部CSS文件，影響效率
2.根據媒體查詢結果執行css片段中不同的選擇器(推薦)
@media screen and (min-width:768px ) and (max-width:996px){
選擇器樣式設定
}
5.框架(bootstrap)
2.響應式應用遇到的問題
1.用百分比實現響應式時出現的問題
1.在設置好樣式後，當縮小或放大瀏覽器窗口，或者是將手機橫屏後，佈局會亂，刷新後佈局又好了。
原因：網頁加載後，css已經渲染到頁面，將手機橫屏後，雖然寬度已經改變，但是CSS已渲染成功，無法改變，導致佈局會亂。
解決方法：
1.添加js事件，監聽屏幕尺寸變化事件(resize事件)，在屏幕變化時重新加載頁面(reload)。此方法存在問題，就是在頁面上已經輸入的表單文字或者其他在網頁刷新時會清空。(不推薦使用)
2.添加js事件，監聽屏幕尺寸變化事件(resize事件)，獲取當前屏幕寬度，動態設置根元素的寬度爲屏幕寬度。
2.百分比設置響應式時，不同像素的百分比相差很大。比如1920px屏幕和800px的屏幕，用相同百分比設置頁面時，差距很大，頁面效果很差。所以，應配合媒體查詢技術，配置不同分辨率的百分比。
3.用百分比設置頁面時，如果頁面無限縮小後，一些字或者圖片或者圖表等會產生堆疊，所以建議設置最外層容器的最小寬度min-width爲一個固定像素的值(如：min-width:800px)，當屏幕寬度達到800時將產生滾動條，不會發生堆疊，可提升用戶體驗
3.彈性佈局
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 這篇博客解釋的很好，大家可以看看
CSS中常見佈局方式
1.利用表格佈局
表格佈局是一種很古老的佈局方式，瀏覽器在渲染表格時，會進行大量計算，影響效率，不推薦使用
2.盒狀模型
依賴 display 屬性 + position屬性 + float屬性。它對於那些特殊佈局非常不方便，比如，垂直居中就不容易實現。而且盒狀模型會產生一些問題，例如子元素全浮動，會導致父元素無高度。外邊距溢出等問題。雖然可以 解決，但是一不留心就不出現問題。
3.彈性佈局
1.簡單，好理解，易於使用
2.支持響應式
3.目前大部分瀏覽器均支持。
Chrome 21+ Opera 12.1+ Firefox 22+ Safari 6.1+ IE 10+
任何一個容器都可以指定爲flex佈局，行內元素也可以使用flex佈局，Webkit內核需加-webkit-前綴 ： display:-webkit-flex;
display:flex;
display:inline-flex;
注意，設爲 Flex 佈局以後，子元素的float、clear和vertical-align屬性將失效。
採用 Flex 佈局的元素，稱爲 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成爲容器成員，稱爲 Flex 項目（flex item），簡稱"項目"。
容器的屬性：
flex-direction: row|row-reverse|column|column-reverse;決定項目的排列方向
flex-wrap: flex-wrap: nowrap | wrap | wrap-reverse;項目多時決定項目是否換行
flex-flow: flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。
justify-content: flex-start左對齊
| flex-end 右對齊
| center 居中
| space-between 兩端對齊，項目之間的間隔都相等。
| space-around 每個項目兩側的間隔相等。
決定了項目主軸對齊的方式
align-items: flex-start 交叉軸的起點對齊。
| flex-end 交叉軸的終點對齊。
| center 交叉軸的中點對齊。
| baseline 項目的第一行文字的基線對齊。
| stretch 如果項目未設置高度或設爲auto，將佔滿整個容器的高度。
定義項目在交叉軸上如何對齊。
align-content: flex-start 與交叉軸的起點對齊。
| flex-end 與交叉軸的終點對齊。
| center 與交叉軸的中點對齊。
| space-between 與交叉軸兩端對齊，軸線之間的間隔平均分佈。
| space-around 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
| stretch 軸線佔滿整個交叉軸。
定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
項目的屬性：
order:數值。數值越小排列越靠前
flex-grow：數值，屬性定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大
flex-shrink：數值，屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。
flex-basis：它可以設爲跟width或height屬性一樣的值（比如350px），則項目將佔據固定空間。
flex：flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。
align-self：屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同於stretch。
| auto
| flex-start
| flex-end
| center
| baseline
| stretch;
該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。
