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 方案,相对来说简单,没有那么复杂,不需要写太多的媒体查询

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