目录
- 移动端开发的基本观点
- 像素基础知识
- viewport原理解析
- 弹性布局
- 响应式设计
- 1rem的运用
- 移动端的事件
- zepto库的使用
移动端开发的基本观点
移动端开发的认识
移动端开发就是手机端开发吗？
No、No、No...
移动端是一个大的范畴，小羊认为应该包括智能手机、平板在内的移动设备，主要是这两者；移动端开发入门的学习路径
目录就是
像素基础知识
先抛3个概念，
px(CSS pixels)：虚拟像素，可以理解为“直觉”像素，我要这个元素宽高10px；
dp(device pixels)：设备像素（物理像素），可以理解为实际的像素，这个宽高为10px的元素在设备中实际用了多少个物理像素点表示；
dpr(device pixels ratio)：设备像素比，公式为1px = (dpr)^2 * 1dp，可以理解为1px由多少个设备像素组成；
3个概念整合理解就是：
我为一个元素设置的宽高为10px，那么实际在显示设备中用多少个设备像素真实表示呢？
dpr=2的话，那么1px由4个设备像素显示，如果是10px，那么显示设备实际用40个dp去显示10px；
dpr=1，则1px由1个设备像素显示；
px和dp的区别就是直觉认为只有10px和真实使用40dp；
为什么会出现dpr>=2的情形？dpr=1不是更加符合我的认知和理解吗？
还不是人们为了追求更高的分辨率所致，分辨率越高图像越清晰！！！；
但是Mac的Retina屏和一般PC的在相同尺寸下，图像却清晰许多，为肾？
dpr>=2所致啊！！！
别的品牌机子老老实实1px = 1dp，Mac却是1px = 4 dp，所以你直觉认为大家都使用同样多的像素点表示图像（这是没错滴），实际背后Mac用了多1倍（指的是dpr）的设备像素显示图像；
实际应用中，显示设备不会直接给你个px和dpr
你实际看到的是以下的参数，下面是肾6Plus的显示屏参数信息：
再抛几个概念，可别晕咯...
英寸：这里指的是屏幕主对角线的尺寸，1英寸=2.54cm，5.5英寸约等于14cm（13.97cm）
分辨率：1920*1080像素，这里指的是物理像素（设备像素）
ppi（pixels per inch）：每英寸的像素点，这里肾6Plus为每英寸有401个像素点
那么ppi是如何计算出来的呢？
顾名思义，每英寸的像素点（设备像素），已知屏幕分辨率和主对角线的尺寸，则ppi等于
var 斜边尺寸 = V(1920^2+1080^2) V代表开根号
var ppi = 斜边尺寸/5.5
ppi = 401ppi
现在我们知道，ppi越高，每英寸像素点越多，图像越清晰；
和先前的知识点有什么关系？
毕竟这些参数是外国人先发明的，他们会优先选择自己熟悉的计量单位作为显示设备的工厂标准参数，因此ppi就用作显示设备的工业标准；
告诉业界人士，ppi达到多少是高清屏，此时对应的dpr是多少，而不直接告诉你我现在的显示设备dpr是多少
毕竟人们直接听到像素分辨率会更加有反应
下面是不同ppi对应的dpi：
|ldpi|mdpi|hdpi|xhdpi
---|---|---|---|---
ppi|120|160|240|320
默认缩放比|0.75|1.0|1.5|2.0
【注】Retina屏都是dpr>=2的高清屏
肾6Plus的dpr为3，是超高清屏；
到目前为止，我们了解到：
给你一个显示设备，设备分辨率为19201080，尺寸为5.5英寸，可以计算出其ppi = 401，根据ppi得知其dpr = 3，
由此可以该设备1px = （3^2）dp，其虚拟像素为1920/3 = 660px，1080/3 = 360px，即虚拟分辨率为360660；
此时，如果你在代码设置元素的宽高为360*660到的话，会发现它的实际尺寸就等于肾6Plus的屏幕尺寸；
【ppi】
viewport原理解析
一个很有意思的现象是，当你把上面的代码在chrome下使用设备模拟方式，模拟肾6Plus的时候，神奇的事情发生了，该元素设置的宽高明明就是手机的宽高，按常理应该占据整个屏幕，实际却是：
究竟是怎么一回事？，如何解决这一问题呢？
好吧，作为实用主义者的你们（不是我哟），先讲解决方案：
在meta标签有一个viewport的属性，可以为这个属性设置width；
肾6Plus默认的width是980px，所以元素宽是360px，实际显示的尺寸是360px*360/980=132.24px（不信可以自己测试一下哟）；
现在只要将viewport的width设置为360px，那么元素就可以占满全屏了；
现在就要引入另一个概念：viewport
viewport的原理在于：
- 先将页面渲染在一个width为显示设备默认尺寸的viewport上，如肾6Plus为980px；
- 然后将viewport等比例缩放至整个手机屏幕上；
例如上例中，元素宽高为360*600px，先将元素渲染在宽度为980px的viewport上，然后等比例缩放在整个手机屏幕上；
viewport就是连接手机屏幕和页面的中间层
为什么要多此一举呢？
想象一下，如果没有中间层，直接将一个页面宽度为980px的直接缩放至320px，那么里面的DOM节点将会进行重绘，很有可能导致排版错乱；
viewport的作用是将所有的DOM节点先绘在宽度为980px的viewport上，然后整个viewport统一缩放，这样就能保证排版的正确性；
关于viewport，涉及两个概念：
- layout viewport：布局viewport，可以理解为放置页面的幕布
- visual vewport：视窗viewport，可以理解为屏幕的视窗
比如：
肾6Plus的visual viewport的宽度为360px，layout viewport为980px；
360px是屏幕视窗的虚拟像素，980px是放置页面的像素；
回顾一下，前面元素出现的缩放现象：
根据肾6Plus的物理分辨率1920*1080以及5.5英寸的屏幕，计算出ppi = 401-> dpr = 3 -> 虚拟分辨率为640*360px；
画一个宽度为360px的元素，理应充满整个手机屏幕 ，但是由于viewport的作用 -> 360px的元素画在980px的layout viewport上，然后等比例缩放在360px的visual viewport上-> 最终你看到的就是，360px的元素无法填充整个屏幕；
先前的一个解决办法是，改变layout viewport，即<meta name="viewport" content="width=360">，让整个layout viewport就是360px，那么元素将填充整个屏幕；
以上都是世界观，给人一些概念性的理解，无法实操，下面就是方法论
实际移动端开发，我们只需关注layout viewport，知道每个移动设备提供给我们多大尺寸的幕布，但是移动设备型号那么多，不可能一个个手动设置width呀！！！
- 动态设置layout viewport
<meta name="viewport" content="width=device-width">
上面的设置表示让layout viewport总是等于设备宽度，即visual viewport；
【注】细心的童鞋可能会注意到，肾6Plus的虚拟分辨率为什么不是640*360px，具体解答可以参考知乎问答
- 获取visual viewport和layout viewport的api
window.innerWidth：表示窗口的宽度（包含滚动条），即visual vewport的宽度
document.body.clientWidth：表示body元素的宽度（不包括border），即layout viewport的宽度
- 移动端其他初始化设置
intial-scale:页面首次显示时，可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放；
no-scalable：是否允许缩放
一个完整的viewport属性的设置为：
<meta name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">
上述完整的意思是，layout viewport等于设备的宽度，首次显示页面时不进行缩放也不允许用户缩放；
小结
- 一开始讲px/dp/dpr/ppi的意义在于铺垫背景知识
- 理解上述知识后，给你一个移动设备的物理分辨率，如iPhone6 Plus19201080以及尺寸5.5inches，可以计算出其ppi为401->dpr = 3，从而测算出手机的虚拟分辨率为640360px；
- 原则上，你开发一个640*360px的元素就可以填充整个手机屏幕，但是由于viewport机制作用，效果未达预期
- 由此引出viewport概念，viewport可以分为visual viewport（视窗尺寸）和layout viewport（放置页面的“幕布“），iPhone6 Plus默认值为980px；
- 通过meta标签的viewport属性，可以动态设置layout viewport，实战中只需要设置：
<meta name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">
```，那么你在开发中写元素宽度为360px，实际在手机就显示为360px；
- 你还可以通过`window.innerWidth和document.body.clientWidth（前提是不设置body的宽度）`分别获取visual viewport和layout viewport；
---
下次讲解弹性布局和响应式设计...