2018移動端頁面開發流程
移動端頁面佈局
一、移動端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>