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