移動端頁面布局
一、移動端app分類
1、Native App原生app手機應用程序
使用原生的語言開發的手機應用，Android系統用的是java，ios系統用的是object-C
2、Hybrid App 混合型app手機應用程序
混合使用原生的程序和html5頁面開發的手機應用
3、Web App 基於Web的app手機應用程序
完全使用html5頁面加前端js框架開發的手機應用
二、Viewport視口
視口是移動設備上用來顯示網頁的區域，一般會比移動設備可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的后果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端窗口的大小。這樣會讓網頁不容易觀看，可以用meta標簽，name="viewport"來設置視口的大小，將視口的大小設置為和移動設備可視區一樣的大小。
在移動端用來承載網頁的這個區域，就是我們的視覺窗口，viewport（視口），這個區域可以設置高度寬度，可以按比例放大縮小，而且能設置是否允許用戶自行縮放。
參數說明：
width：寬度設置的是viewport寬度，可以設置device-width特殊值
initial-scale：初始縮放比，大於0的數字
maximum-scale：最大縮放比
minimum-scale：最小縮放比
user-scalable：用戶是否可以縮放，yes或no（1或0）
<!--viewport只有移動端才能識別-->
<!--設置寬度 設置成和設備一樣的寬度(width=device-width)-->
<!--設置默認的縮放比 initial-scale =1.0-->
<!--設置是否允許用戶自行縮放 user-scalable no yes-->
設置方法如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
PC頁面在手機縮放的原因：
1、iphone默認的viewport980px ，user-scalable=yes
2、那么initial-scale在320px的瀏覽器上就是320/980 為0.33333
總結：
用meta標簽把viewport的寬度設為device-width，同時initial-scale=1.user-scale=0就構建了一個標准的移動web頁面
三、PC及移動端頁面適配方法
設備有多種不同的分辨率，頁面適配方案有如下幾種：
1、全適配：流體布局+響應式布局
2、移動端適配：
使用百分比自適應布局（流式布局）同時需要對移動端的viewport視口進行設置，就可以達到適配的目的
a、流體布局+少量響應式
b、基於rem的布局
c、彈性合模型
a、流體布局
就是使用百分比來設置元素的寬度，元素的高度按實際高度寫固定值，流體布局中，元素的邊線（border）無法用百分比，可以使用樣式中的計算函數calc()來設置寬度，或者使用box-sizing屬性將盒子設置為邊線計算盒子尺寸。
1、calc() 可以通過計算的方式給元素加尺寸。比如：width:calc(25% - 4px);
2、box-sizing
a、content-box 默認的盒子尺寸計算方式。
b、border-box 置盒子的尺寸計算方式為從邊框開始，盒子的尺寸，邊框和內填充算在盒子尺寸內
響應式布局
響應式布局就是使用媒體查詢的方式，通過查詢瀏覽器的寬度，不同的寬度應用不同的樣式塊，每個樣式塊對應的是該寬度下的布局方式，從而實現響應式布局，響應式布局的頁面可以適配多種終端屏幕（pc、平板、手機）。
相應布局的偽代碼如下：
b、基於rem的布局
1、em單位是參照元素自身的文字大小來設置尺寸
2、rem指的是參照根節點的文字大小。
根節點指的是html標簽，設置html標簽的大小，其他的元素相關尺寸設置用rem，這樣，所有元素都有了統一的參照標准，改變html文字的大小，就會改變所有元素用rem設置的尺寸大小。
cssrem安裝：cssrem插件可以動態地將px尺寸換算成rem尺寸
下載本項目，比如：git clone https://github.com/flashlizi/cssrem 進入packages目錄：Sublime Text-》Preferences-》Browse Packages 復制下載的cssrem目錄到剛才的packages目錄里。重啟Sublime Text。
配置參數 參數配置文件：Sublime Text-》Preferences-》Package Settings-》cssrem 里面有個px_to_rem （意思是px轉rem的單位比例，默認為40）。max_rem_fraction_length（px轉rem的小數部分最大的長度。默認為6）。availiable_file_types 啟用此插件的文件類型。默認為：[".css"，".less"，"sass"，".html"]。
c、彈性盒模型布局
1、容器屬性 display:flex 聲明使用彈性盒布局(全部都是在父元素上設置)
使用display:flex相對於把子元素變為行內塊元素，並且之間不會產生間隙。
確定子元素排列的方向: flex-direction:row | row-reverse|column|column-reserve
a、 flex-direction:row 默認子元素水平靠左排列
b、 flex-direction:row-reverse 子元素靠右倒序排列，類似於右浮動
c、 flex-direction:column; 豎排
d、 flex-direction:column-reverse; 倒序豎排
元素超過父容器尺寸時是否換行: flex-wrap:nowrap|wrap|wrap-reverse
a、flex-wrap:nowrap； 子元素寬度超過父級寬度時，默認不換行
b、flex-wrap:wrap； 子元素寬度超過父級寬度時，換行
c、flex-wrap:wrap-reserve； 子元素寬度超過父級寬度時，倒序換行
同時設置flex-direction | flex-wrap如： flex-flow:flex-direction | flex-wrap flex-flow:row wrap;
子元素的尺寸確定之后，用此屬性來設置flex-direction定義方向上的分布方式：
justify-content:flex-start | flex-end | center | space-between | space-around
a、justify-content:flex-start 整體子元素靠左
b、justify-content:flex-end 整體子元素靠右
c、justify-content:center 整體子元素居中
d、justify-content:space-between 第一個子元素靠左頂格，最后一個子元素靠右頂格，中間子元素均分距離
e、justify-content:space-around 第一個子元素靠左的間距和最后一個子元素靠右的間距是中間子元素間距的一半，中間的元素等分間距。
子元素的尺寸確定之后，用此屬性來設置flex-direction定義方向上的垂直方向的分布方式：align-items:flex-start | flex-end | center | baseline | stretch
a、align-items:flex-start 整體垂直靠上排列
b、align-items:flex-end 整體垂直靠下排列
c、align-items:center 整體子元素垂直居中（也可以使用margin或padding或定位來實現）
d、align-items:baseline 子元素內的文字底部對齊，如果文字大小不同，會導致子元素底部不對齊
e、align-items:stretch 如果子元素不設置高度，高度會被拉伸到和父元素高度相同（除去自身的margin）
設置多行子元素在行方向上的對齊方式：align-content : flex-start | flex-end | center | space-between | space-between | space-around | stretch
a、align-content : flex-start 多行整體靠上排列
b、align-content : flex-end 多行整體靠下排列
c、align-content :center 多行整體居中排列
d、align-content:space-between 第一行子元素靠上頂格，最后一行子元素靠下頂格，中間行子元素等分垂直的間距
2、條目屬性
同時設置flex-grow和flex-shrink以及flex-basis 如：flex:none | <'flex-grow' ><'flex-shrink'>'?||<'flex-basis'>
表示當父元素又多余的空間時，這些空間在不同子元素質檢的分配比例。flex-grow:number
當父元素的空間不足時，各個子元素的尺寸縮小的比例。flex-shrink:number
用來確定彈性條目的初始主軸尺寸。flex-basis:length|precentage|auto|content
覆寫父元素指定的對齊方式。align-self:auto | flex-start | flex-end |center|baseline|stretch
改變條目在容器中的出現順序。order:integer
使用彈性盒模型做菜單
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>彈性盒模型的應用</title> 6 <link rel="stylesheet" href="../css/reset.css"> 7 <style> 8 .menu_con{ 9 width:960px; 10 margin:20px auto; 11 display: flex; 12 } 13 .logo{ 14 width:80px; 15 height:60px; 16 background:gold; 17 } 18 .menu{ 19 background: #c3eaff; 20 flex-grow: 1; 21 display: flex; 22 align-content: space-between; 23 /*使子元素垂直居中*/ 24 align-items: center; 25 overflow: hidden; 26 } 27 .menu li{ 28 text-align: center; 29 /*每個li均分剩余寬度*/ 30 flex-grow: 1; 31 border-left:1px solid #ccc; 32 margin-left:-1px; 33 } 34 /* 35 或者是給父元素加overflow:hidden,同時給子元素設置margin-left為負值來實現邊框合並 36 可以使用這種方法來去掉第一個li的左邊距 37 .menu li:nth-child(1){ 38 border-left: 0; 39 } 40 */ 41 menu li a{ 42 color:#666; 43 } 44 @media (max-width:960px){ 45 .menu_con{ 46 width:100%; 47 } 48 } 49 </style> 50 </head> 51 <body> 52 <div class="menu_con"> 53 <div class="logo"></div> 54 <ul class="menu"> 55 <li><a href="javascript:void(0);">首頁</a></li> 56 <li><a href="javascript:void(0);">新聞動態</a></li> 57 <li><a href="javascript:void(0);">時事熱點</a></li> 58 <li><a href="javascript:void(0);">娛樂新聞</a></li> 59 <li><a href="javascript:void(0);">關於我們</a></li> 60 </ul> 61 </div> 62 </body> 63 </html>