zepto 移动端笔记

移动端（现在主流方向）:
   布局简单:网页结构内容简短
   适配复杂：适配苹果系列 与安卓大家庭设备的显示

移动端应用:
    一、移动端App（原生）
        1.ios  = >  objective-c
        2.android  = > java 

        优势：用户体验好，功能更齐全
        缺点：用人成本高、开发周期更长    

------------------以下都是基于 HTML5 + CSS3 + JS--------------------------
    二、H5页面(使用h5标准制作开发的手机网页)
        1.普通手机网页（M站） https://m.jd.com/
            优 :相比响应式，体验稍好，内容更全面，开发设计较为简单
            缺 :同时需要开发两套（一套pc 、一套m站）开发成本高 ，运营成本高

        2.公众号页面（前端方向）
            手机版端网页（基于H5标准，主要能考虑手机适配即可）

        3.响应式网页（PC端 与移动端公用一套页面）
            优点：开发成本稍低，运营成本低
            缺点：由于该方式结构有所受限，开发较为繁琐，内容基于考虑移动端，内容会有所受限

        4.自适应网页（流式布局、百分比布局...）    

    三、纯HTML5 开发的web app
        优势：开发周期短，用人成本低，应用于多平台设备
        缺点：用户体验不好，系统流畅度不高，低端手机更显（为发烧而生），功能有所受限，不能离线使用

    四、混合应用（Hybird App）
       通过h5页面 + 原生 = 混合应用

       优点：开发成本低，体验较好
       缺点：不能离线使用，功能有所受限

    五、小程序
        1.微信
        2.支付宝    
        3.微码   

        打包混合应用、纯HTMLapp工具：
                1.HBuilder(傻瓜式，在线打包)
                2.Android Studio
                3.x-code（苹果电脑）
                4.Cordova / Phone Gap（混合应用ios、android）

-----------------------------------------------------------------------
关于移动端开发主要考虑的问题：
    1.系统兼容性问题
        a)ios兼容
            ios 中固定定位有问题
        b)android兼容

    2.设备屏幕的分辨率适配问题
        屏幕大小不一：
            1.iphone 4s
            2.iphone 5s
            3.iphone 6s
            4.iphone 6s plus
            5.iphone x    

            6.安卓阵营的各大品牌    

    3.移动端交互（事件）
            键盘事件？
            鼠标事件（除点击事件（延时300ms）外，基本已废）

            触摸、 长按 、 滑动（上下左右）...

--------------------------解决移动页面的适配 + 响应式---------------------------
    注：移动禁忌直接使用固定的宽高（使用媒体查询结合使用除外）

    1.可以使用百分比布局 (宽高可以使用百分比)

    2.弹性盒子(flex)

    3.媒体查询（media）

        @media

    4.Rem 方案（与手淘flexible相似）

    以上4个方案，一般都是混合使用，如果使用1,2,3 混合的话，需要编写太多的媒体查询

    Rem 方案,相对来说简单,没有那么复杂,不需要写太多的媒体查询
    

-----------------------------------------------------------------------------

    视口： 其实就是窗口显示的宽度 ，移动端使用理想视口让布局视口和视觉保持一致  ： 添加meta视口标签实现即可

    分辨率：屏幕的像素
    DPR:设备像素比（设置物理像素与 虚拟像素比）
    PPI:PPI即每英寸所拥有的像素数目

    物理像素: 屏幕的宽高所含有的像素点数量 ： iphone 6 中 ： 1334 * 750 
    布局像素: 屏幕宽高 布局中的大小（css像素）iphone 6 ：    667 * 375

    普通屏幕(1 : 1)：
        640x360  诺基亚 5230

    高清屏（retina , 1 : 2 ）：布局一个像素单位长度 ，需要通过设备的两个像素单位长度来显示

    超高清屏（ 1 : 3 ）：

    常见移动设计稿：一般会设计成大众的款（iphone6）宽度 ：750 * h   / 1125(超高清屏)

    假设：求小米6点dpr(设备像素比)：
        已知：1920 x 1080 分辨率（物理像素）
             428 PPI

        dpr = ppi / 160;     = > 428 / 160 = 2.675
        
        dpr =  物理像素 / css布局像素（虚拟像素）

        虚拟的宽高像素 = 1080 / 2.675 ~ 404  , 1920 / 2.675 ~  718

    移动端单位：
        1.em  相对于父级的大小
        2.rem (布局主流)     相对于根节点(html)的大小
        3.vh / vw  (自己去看) 相对于窗口可视区域的小 ，1vw = 宽度的 1/100