移动端 Web 页面的开发，由于机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得 Web 页面在不同移动设备上具有适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。
那么在了解如何具体适配之前，先聊聊关于移动端开发的一些像素的概念，主要有以下内容：
- 设备像素(物理像素)
- 屏幕尺寸和像素密度(
PPI) CSS像素(设备独立像素、逻辑像素)- 像素比(
DPR)
设备像素(物理像素)
设备像素也被称为"物理像素"。对于一般的显示设备来说，1 个像素对应屏幕上的1 个发光点，这个点能够发出红、绿、蓝三种颜色的光，通过混合不同的 RGB 值，可以创造1 个像素的颜色，因此设备像素就是指实际存在的像素，具体可以参考 LED 显示屏。
那这个物理像素和移动端的关系是什么呢？平时看到设备上的参数时，往往会有一个像素分辨率，那么这个像素分辨率指的就是设备像素。
例如 iPhone 6 的设备分辨率为 1344x750，这代表的是在 iPhone 6 的屏幕中，水平方向有750 个像素点，垂直方向上有1344个像素点。
有个需要注意的点就是，PC 端屏幕显示器的分辨率是横纵比，而手机屏幕的分辨率是纵横比。 这是因为在智能手机出现之前，大部分手机的屏幕都是横向的，下面是真实键盘。当智能手机问世后，屏幕越来越大，于是就把屏幕旋转过来竖着放，所以给人的感觉就是在手机上的屏幕分辨率是纵横比。
屏幕尺寸和像素密度(PPI)
了解了设备像素的概念之后，设备的参数往往还有一个屏幕尺寸的信息，一般以英寸为单位。那这个屏幕尺寸指的是手机的什么大小呢？是面积呢？还是某条边的长度？
很明显，这个xx英寸指的并不是手机屏幕的面积，而是手机屏幕对角线的长度 ，英寸是个长度单位，1 英寸等于2.54厘米。
现在已知屏幕分辨率和屏幕尺寸，那么就可以计算像素密度该设备的像素密度( Pixels Per Inch )，像素密度的计算公式为：屏幕对角线分辨率 / 屏幕对角线长度。
像素密度(ppi)代表每英寸所拥有的像素数量 ，像素密度越高，代表显示屏能够以越高的密度显示图像。所以，显示密度越高，拟真度就越高。
计算
iPhone 6的像素密度： 屏幕对角线长度：4.7 英寸，以di表示 屏幕横向分辨率：750 像素，以w表示 屏幕纵向分辨率：1334像素，以h表示屏幕对角线分辨率：(w2 + h2)1/2 = (7502 + 13342)1/2，记为
dp像素密度：
dp/di≈326ppi
CSS像素
CSS 像素也称为逻辑像素或设备独立像素 ，是前端开发中的一个概念。CSS 像素是一个抽象单位 ，与设备无关，主要在浏览器中使用。因为设备分辨率的不同，所以同样大小 CSS 像素在不同设备表现不一致。
如上图所示，当 ppi 越高时，设备的像素就会越来越多，如果 CSS 像素和设备像素是 1:1 的关系的话，随着设备像素的提升，图像就会越来越小。
那么我们就要修改 CSS 像素与设备像素的比例，使其的关系不再是 1:1。
如上图所示，以前 CSS 像素和设备像素是 1:1 关系，即1 个 CSS 像素对应 1 个设备像素；现在修改这个比例为 1:2，即1 个 CSS 像素对应2个设备像素。
在做 PC 端网页开发的时候，在不考虑缩放的情况下，CSS 像素始终和设备像素是 1:1 的关系，所以有一种错觉就是觉得 CSS 像素和设备像素就是 1:1 的对应关系。实际上 CSS 像素确是一个抽象的单位，具体含有多少个设备像素不是固定的。
像素比(DPR)
像素比的全称是设备像素比，英文为 Device Pixel Ratio，它代表的是设备的物理像素与逻辑像素之比，所以**DPR 的计算公式为：设备像素 / CSS 像素**。
如果设备像素和 CSS 像素的比例关系为 1:1，即 DPR 等于1 ，此时屏幕上使用1 个物理像素显示1 个 CSS 像素 ；如果设备像素和 CSS 像素的比例关系为 1:2，即 DPR 等于2 ，那么就要使用4 个物理像素显示1 个 CSS 像素。
可以使用 window.devicePixelRatio 获取当前设备的像素比。
以 iPhone 6 为例，官方给出的分辨率的 1334x750，也就是说在水平方向上有750 个像素点。当我使用一个 375px 的 <div> 放到页面上时，它却占满了整个屏幕。也就是说在 iPhone 6 手机中，1 个 CSS 像素需要2 个设备像素显示，即 DPR 为2。
二倍图原理
在日常的移动端开发中，通常使用的都是二倍图，这是为什么呢？
这就和设备的
DPR有关系了，假如现在有一张宽200 、高100 的图片要在设备中显示，可以将这张图片想象成水平是200 个CSS像素点，垂直方向是100 个CSS像素点，在适配屏幕时，
- 假如
DPR为1 ，在设备屏幕上渲染时，正好可以1 个CSS像素点对应1个设备像素点。- 假如
DPR为2 ，那么1 个CSS像素点对应4 个设备像素点，此时图片要被拉伸，那么图片的每个CSS像素点都会被放大，这样就会导致图片模糊。所以在开发时使用二倍图是比较合适的选择，如果图片是宽400 、高200 ，同样设置
CSS像素为宽200 、高100 ，放在DPR为2的设备上就不会模糊了。如果要求一般， 统一使用二倍图就可以，显示效果也是不错的。因为更高倍图在低分辨率屏幕手机上会增加一些流量消耗，加载时间更长。