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