移动端 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的设备上就不会模糊了。

如果要求一般， 统一使用二倍图就可以，显示效果也是不错的。因为更高倍图在低分辨率屏幕手机上会增加一些流量消耗，加载时间更长。