对于移动端开发来说，无可避免的就是直面各种设备不同分辨率和不同DPR（设备像素比）的问题，在此忽略其他兼容性问题的探讨。
一. 移动端开发有关于像素的概念：
1.设备像素(dp)，也叫物理像素。指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了。
2.分辨率，屏幕上物理像素的数量。
3.设备独立像素(dip)，又称密度无关像素。可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素。由相关系统转化为物理像素在设备上体现。
4.css像素，web编程中的概念，属于设备独立像素中的一种，独立于设备，属于逻辑上衡量像素的单位。
5.设备像素比(dpr) = 设备像素值(dps) / 设备独立像素值(dips)，代表系统转化时一个css像素占有多少个物理像素。
6.像素密度(ppi)，设备（屏幕）每英寸内有多少个像素点。
二. 移动端的视口：
移动端视口viewport（div100%时的css大小）：移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，可能与浏览器的可视区域不同。默认比浏览器可视区域要大，这也是为什么一般的PC端网页放在移动端会出现横向滚动条的原因。
移动端中的三个不同的可视区域大小，来自于ppk关于移动设备的viewport研究:
1.布局视口（layout viewport），浏览器默认的viewport，一般比浏览器可视区域大。
2.视觉视口（visual viewport），浏览器的可视区域大小（浏览器的可见区域css像素值）
3.理想视口（ideal viewport），设备的实际物理宽度（device-width)，是一种与ppi无关的设备原始的宽度（英寸），例如320px和660px下的iphone的理想视口都是320px。
三.位图像素
一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。
理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。当遇上对应的位图像素与物理像素不统一的时候。
1.位图像素>物理像素。 1个位图像素对应于多个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊。（具体取决于设备系统的图像算法，并不是简单的切割图片）（图片拉伸）
2.位图像素<物理像素.。 一个物理像素对应多个位图像素，所以它的取色也只能通过一定的算法(显示结果就是一张位图像素只有原图像素总数四分之一的图片)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)（图片挤压）
四.rem适配
什么是rem：即以根节点（html）的字体大小作为基准值进行长度计算。
当我们进行移动端开发时，如果使用px作为单位的话，我们很难在不同大小的屏幕上，通过固定的px来达到适配。但是如果我们统一使用rem作为计量单位，在不同的设备下通过改变根节点字体大小来整体低改变页面元素的布局及大小，无疑会是适配变得简单许多。rem与em相比没有复杂的对比传递，所以计算值显得更加简单，也更适合作为进行移动端开发的计量单位。
那我们如何修改不同设备下的根节点的字体大小来达到适配呢？下面有个常用的代码块
