自適應網頁(響應式佈局)+彈性佈局
阿新 • • 發佈：2019-01-31
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屬性完全一致。