目录
1、移动端开发的基本观点
2、像素基础知识
3、viewport原理解析
4、弹性布局
5、响应式设计
6、1rem的运用
7、移动端的事件
8、zepto库的使用
一、移动端开发的基本观点
移动端开发就是手机端开发吗？首先回答是否定的，移动端是一个大的范畴，应该包括智能手机以及平板电脑在内的所有移动设备，但主要是这两者。
二、像素基础知识
2.1、设备像素
设备像素（Device Pixels）：设备屏幕的物理像素，设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。
2.2、CSS像素
CSS像素（CSS Pixels）：是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。
所以，1个CSS像素在不同设备上可能对应不同的物理像素，这个比值是 是设备的属性（Device Pixel Ratio，设备像素比）。
在CSS规范中，长度单位可以分为绝对单位和相对单位。px是一个相对单位，相对的是设备像素（Device Pixels）。
比如iPhone5使用的是Retina视网膜屏幕，用2x2px的Device Pixel代表1x1px的CSS Pixel，所以设备像素数为640x1136px，而CSS逻辑像素数为320x568px。
为了更清晰的理解设备像素和CSS像素，接下来的两幅图说明了当用户缩放的时候会发生什么。
第一幅图展示的是当用户进行缩小操作的时候设备像素（深蓝色背景）和CSS像素（半透明前景）的样子。CSS像素变得小了；一个设备像素覆盖了多个CSS像素。
第二幅图展示的当用户进行放大操作时候设备像素和CSS像素的样子。一个CSS像素现在覆盖了多个设备像素。
2.3、分辨率
分辨率（Resolution）也是一个物理概念，含义要看对谁。
对于屏幕，分辨率一般表示屏幕上显示的物理像素总和。比如，我们说iPhone6屏幕分辨率是750x1334px。
对于图像，概念等同于图像尺寸、图像大小、像素尺寸等等。比如，我们说20x20px的icon。
其实严格来说，图像分辨率的单位是ppi（Pixels Per Inch），对于一个图片文件，其像素尺寸是一定的，可能含有来自相机的meta信息，比如分辨率200ppi，该值只是个建议值，图片显示出来我们看到的尺寸由屏幕像素密度决定，像素密度越高，图片看起来越小。
2.4、设备像素比
设备像素比缩写为DPR或者DPPX，如下：
- Device Pixel Ratio: Number of device pixels per CSS Pixel
- Dots Per Pixel: the amount of device pixels per CSS pixel (e.g. in Retina displays this will be 2).
设备像素比表示1个CSS像素（宽度）等于几个物理像素（宽度）：
DPR = 物理像素数 / 逻辑像素数
比如dpr=2时，1个CSS像素由4个物理像素点组成。
DPR不是单位，而是一个属性名，比如在浏览器中通过window.devicePixelRatio获取屏幕的DPR
2.5、像素密度
像素密度也叫显示密度或者屏幕密度，缩写为DPI(Dots Per Inch)或者PPI(Pixel Per Inch)，含义相同
专业的一般说PPI，细微差异如下：
ppi和dpi（每英寸点数）。从技术角度说，“像素”（p）只存在于计算机显示领域，而“点”（d）只出现于打印或印刷领域。
经常看到相同尺寸的屏幕像素尺寸却不同，也就是DPI的差异，比如4.7英寸的iPhone6像素尺寸为750x1334px，而4.7英寸的HTC One像素尺寸为1080x1920px。
像素密度很容易算出来，比如iPhone6的：
// 屏幕对角线的像素尺寸 / 物理尺寸（inch）
Math.sqrt(750*750 + 1334*1334) / 4.7 = 326ppi
2.6、设备独立像素
一般指Google提出的用来适配Android海量奇怪屏幕的，Windows也有这个概念，但含义不同，IOS好像没有设备独立像素一说。
设备独立像素作为单位，一般是指Android开发中的东西，缩写为DIP(Device Independent Pixels)或者DP(Density-independent Pixels)，含义完全一致
Android设备的特点是屏幕尺寸很多，因此为了显示能尽量和设备无关，提出了dip，参照的density是160。计算公式为：
// 当屏幕密度为160（单位是ppi或者dpi，一个意思）时，px === dip
px = dip * density / 160
// 所以
dip = px * 160 / dpi
当然，这两个式子都只适用于Android设备，这个dip拿到其它地方去没什么意义。
2.7、下面就是应用了
实际开发中，设计师和前端工程师之间的协同是这样的：
一般由设计师按照设备像素(Device Pixel)为单位制作设计稿。
前端工程师，参照相关的设备像素比(Device Pixel Ratio)，进行换算以及编码。
我们就拿iPhone 6s来说：
可以看到，其分辨率为1334*750px，设备尺寸为4.7英寸，可以计算出ppi为326，查资料得知其dpr为2，可以得到对于该设备1个CSS像素数对应4个设备像素点显示，所以iPhone 6s的虚拟像素为宽750/2=375px，高1334/2 = 667px，即虚拟分辨率为667*375px。
此时，我们如果在代码中设置元素的宽高为667*375px的话，会发现它的实际尺寸就等于iPhone 6s的屏幕尺寸。
三、viewport原理解析
桌面上视口宽度等于浏览器宽度，但在手机上有所不同。
布局视口
手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站视觉视口
屏幕的可视区域，即物理像素尺寸理想视口
当网站是为手机准备的时候使用。通过meta来声明。早期iPhone理想视口为320x480px
所以，在没有缩放的情况下，屏幕的CSS像素宽度其实是指理想视口的宽度，而meta标签：
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
指定了布局视口=理想视口，并且禁止缩放。所以添上width=device-width的viewport meta后页面变大了（一开始页面内容小得看不清），实际上是布局视口变小了。
