1.自適應網頁
1.宣告viewport元標籤
注：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檔案(不推薦使用)
此方法不推薦使用，因為瀏覽器會請求不符合條件的外部css檔案，影響效率
2.根據**查詢結果執行css片段中不同的選擇器(推薦)
@media screen and (min-width:768px ) and (max-width:996px)
5.框架(bootstrap)
2.響應式應用遇到的問題
1.用百分比實現響應式時出現的問題
1.在設定好樣式後，當縮小或放大瀏覽器視窗，或者是將手機橫屏後，布局會亂，重新整理後布局又好了。
原因：網頁載入後，css已經渲染到頁面，將手機橫屏後，雖然寬度已經改變，但是css已渲染成功，無法改變，導致布局會亂。
解決方法：
2.新增js事件，監聽螢幕尺寸變化事件(resize事件)，獲取當前螢幕寬度，動態設定根元素的寬度為螢幕寬度。
2.百分比設定響應式時，不同畫素的百分比相差很大。比如1920px螢幕和800px的螢幕，用相同百分比設定頁面時，差距很大，頁面效果很差。所以，應配合**查詢技術，配置不同解析度的百分比。
3.用百分比設定頁面時，如果頁面無限縮小後，一些字或者或者圖表等會產生堆疊，所以建議設定最外層容器的最小寬度min-width為乙個固定畫素的值(如：min-width:800px)，當螢幕寬度達到800時將產生滾動條，不會發生堆疊，可提公升使用者體驗
3.彈性布局
這篇部落格解釋的很好，大家可以看看
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屬性完全一致。
注：本部落格**雲飛揚的部落格
自適應布局與響應式布局
什麼是響應式布局 響應式布局就是實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。換句話說就是乙個 能夠相容多個終端，而不是為了每乙個終端做乙個特定的版本。什麼是自適應式布局 自適應布局就是指能忘了使網頁自適應的顯示在不同大小終端裝置上的新...
自適應布局和響應式布局
我根據個人理解描述一下 一套程式在多種終端裝置展示，頁面布局有2種 自適應布局和響應式布局。這二者有啥區別呢？自適應布局，就是頁面在多種終端裝置，不同解析度下，能夠正常展示，不會出現錯位，嚴重變形等，但頁面布局不變。而響應式布局，則在不同終端 不同解析度下，頁面布局 元素呈現的先後順序可能會有所變化...
響應式布局和自適應布局
一 區別 響應式布局等於流動網格布局，自適應布局等於使用固定分割點來進行布局 二 響應式布局 實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式 1 設定meta標籤 下面的檢視標籤告訴瀏覽器，使用裝置的寬度作為檢視寬度並禁止初始的縮放。在標籤裡加入這個meta標籤。2 通過 查詢來設定樣式 medi...