一、app

Native App      原生App
    java        安卓
    oc           ios

    (1)優(yōu)勢
        性能高
        可以調(diào)用底層功能
    (2)劣勢
        不能跨平臺
        最少需要兩個團隊
        開發(fā)周期長
        維護(hù)難
        開發(fā)成本高

(a)Web App      WebApp
    移動端頁面，包了一個殼子變成app

    (1)優(yōu)勢
        可以跨平臺
        一個人搞定
        開發(fā)周期短
        維護(hù)簡單
        開發(fā)成本低
    (2)劣勢
        性能相對原生差
        調(diào)用不了底層功能
(b)Hybird App       混合App
    webview
    phonegap
    APICloud
    Ionic
    RN
    HBuilder

二、移動端頁面

(1)移動端
    phone   pad     watch   tv
(2)移動端和pc有什么區(qū)別嗎?
    沒有什么區(qū)別，pc怎么寫，移動端就怎么寫,只不過尺寸不一樣
    PC
        瀏覽器之間的兼容
    移動端
        各種設(shè)備尺寸的兼容
(3)移動端需要設(shè)置視口
    viewport
        頁面的尺寸
        初始分辨率
        能否縮放
        最大縮放
        最小縮放
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
    emmet:
        meta:vp
(4)移動端布局有很多種方式
    定寬
    百分比
    彈性
    rem
    響應(yīng)式

三、彈性

    （a）盒子模型
        width/height+padding+border
        （1）old
            大小不夠，往外撐
            box-sizing: content-box;
        （2）new
            大小不夠，往里擠
            box-sizing: border-box;
    （b）彈性盒子     flex-box
    (1)開啟彈性
        給父級加
        display: -webkit-flex;
        display: flex;
    (2)子級默認(rèn)分配位置
        -webkit-flex: 系數(shù);
        flex: 系數(shù);
    (3)flex-方向
        flex-direction: row|row-reverse|column|column-reverse
    (4)flex-wrap(換行)
        flex-wrap: nowrap|wrap|wrap-reverse
    (5)justify-content(水平排列)
        center|flex-start|flex-end|space-around|space-between
    (6)align-items(垂直排列)
        center|flex-start|flex-end|baseline