移动端、flex

前言：

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

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

app

    Native App      原生App
        java        安卓
        oc          ios

        优势
            性能高
            可以调用底层功能
        劣势
            不能跨平台
            最少需要两个团队
            开发周期长
            维护难
            开发成本高

    Web App         WebApp
        移动端页面，包了一个壳子变成app

        优势
            可以跨平台
            一个人搞定
            开发周期短
            维护简单
            开发成本低
        劣势
            性能相对原生差
            调用不了底层功能
    Hybird App      混合App
        webview
        phonegap
        APICloud
        Ionic
        RN
        HBuilder

移动端页面

    移动端
        phone   pad     watch   tv

    移动端和pc的区别： 
        没有什么区别，pc怎么写，移动端就怎么写,只不过尺寸不一样
        PC
            浏览器之间的兼容
        移动端
            各种设备尺寸的兼容
    移动端比pc难?
        移动端比pc简单。

    设计给的图一般都是二倍图或者三倍图
    320             640
    375             750
    414             828

移动端测试

    1.Chrome浏览器自带模拟器
    2.真机测试

移动端需要设置视口：（viewport）

        页面的尺寸
        初始分辨率
        能否缩放
        最大缩放
        最小缩放
   eg:
        
        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: 系数;
            flex: 系数;
        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/基准宽度*新宽度