一、app

Native App      原生App
    java        安卓
    oc           ios

    (1)優(yōu)勢(shì)
        性能高
        可以調(diào)用底層功能
    (2)劣勢(shì)
        不能跨平臺(tái)
        最少需要兩個(gè)團(tuán)隊(duì)
        開發(fā)周期長(zhǎng)
        維護(hù)難
        開發(fā)成本高

(a)Web App      WebApp
    移動(dòng)端頁(yè)面，包了一個(gè)殼子變成app

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

二、移動(dòng)端頁(yè)面

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

三、彈性

    （a）盒子模型
        width/height+padding+border
        （1）old
            大小不夠，往外撐
            box-sizing: content-box;
        （2）new
            大小不夠，往里擠
            box-sizing: border-box;
    （b）彈性盒子     flex-box
    (1)開啟彈性
        給父級(jí)加
        display: -webkit-flex;
        display: flex;
    (2)子級(jí)默認(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