前言：

路靠自己走，就算再坎坷，也要自己過

--------------------------------正文---------------------------------

app

    Native App      原生App
        java        安卓
        oc          ios

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

    Web App         WebApp
        移動端頁面品洛，包了一個殼子變成app

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

移動端頁面

    移動端
        phone   pad     watch   tv

    移動端和pc的區(qū)別： 
        沒有什么區(qū)別树姨，pc怎么寫，移動端就怎么寫,只不過尺寸不一樣
        PC
            瀏覽器之間的兼容
        移動端
            各種設備尺寸的兼容
    移動端比pc難?
        移動端比pc簡單桥状。

    設計給的圖一般都是二倍圖或者三倍圖
    320             640
    375             750
    414             828

移動端測試

    1.Chrome瀏覽器自帶模擬器
    2.真機測試

移動端需要設置視口：（viewport）

        頁面的尺寸
        初始分辨率
        能否縮放
        最大縮放
        最小縮放
   eg:
        <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
        emmet:
            meta:vp

移動端布局有很多種方式

        定寬
        百分比
        彈性
        rem
        響應式

彈性

    盒子模型
        width/height+padding+border

        old
            大小不夠帽揪，往外撐
            box-sizing: content-box;
        new
            大小不夠，往里擠
            box-sizing: border-box;
        calc        計算
            calc( 20% - 2px )

彈性盒子 flex-box

    開啟彈性
            給父級加
            display: -webkit-flex;
            display: flex;
        子級默認分配位置
            -webkit-flex: 系數(shù);
            flex: 系數(shù);
        flex-方向
            flex-direction: row|row-reverse(橫反轉)|column|column-reverse(列翻轉)
        flex-wrap(換行)
            flex-wrap: nowrap|wrap|wrap-reverse
        justify-content(水平排列)
            center|flex-start|flex-end|space-around|space-between
        align-items(垂直排列)
            center|flex-start|flex-end|baseline

rem 單位

        em      當前元素的字體大小
        rem     根字體大小
            html的字體大小
  算尺寸：
    基準rem/基準寬度=新rem/新寬度
    ? = 基準rem/基準寬度*新寬度