一、背景

1、在移动端，虽然大部分浏览器内核都是 webkit，而且大部分都支持 css3 的所有语法。但是，由于手机屏幕尺寸不一样，分辨率不一样，或者你需要考虑横竖屏的问题，或者考虑到各式各样的移动端兼容性问题等等，这时候你也就不得不解决在不同手机上，不同情况下的展示效果，所以就需要一个开箱即用并且行之有效的移动端适配方案。

2、做过移动端适配的小伙伴一定有遇到过这行代码：

但是，很多小伙伴只是感性的认识：噢，我加了这行代码，然后页面的宽度就会跟我的设备宽度一致。然而，这种理解是很片面的。那么，这句话的本质到底是什么呢？

二、名词解释

2.1、英寸

一般用英寸描述屏幕的物理大小，如电脑显示器的 17、22，手机显示器的 4.8、5.7等使用的单位都是英寸。

屏幕尺寸指的是以屏幕对角线的长度来计算的，单位是英寸。1英寸=2.54厘米

2.2、像素

像素即一个小方块，它具有特定的位置和颜色。

图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。

像素可以作为图片或电子屏幕的最小组成单位。

下面我们打开一张图片：

将图片放大即可看到这些像素点：

2.3、屏幕分辨率

屏幕分辨率指一个屏幕具体由多少个像素点组成。

下面是 apple 官网上对手机分辨率的描述：

iPhone 14 Pro、iPhone 14 Plus、iPhone SE 的分辨率分别为 2556 * 1179、2778 * 1284、1334 * 750，这表示手机分别在垂直和水平方向上所具有的像素点数。

==当然分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。==

2.4、图片分辨率

我们通常说的图片分辨率其实是指图片含有的像素数，比如一张图片的分辨率为800 x 400。这表示图片分别在垂直和水平上所具有的像素点数为800和400

2.5、PPI

PPI(Pixel Per Inch)：每英寸包括的像素数。

PPI 可以用于描述屏幕的清晰度以及一张图片的质量。

使用PPI描述图片时，PPI越高，图片质量越高，使用PPI描述屏幕时，PPI越高，屏幕越清晰。

在上面描述手机分辨率的图片中，我们可以看到：iPhone 14 Pro、iPhone 14 Plus、iPhone SE 的PPI分别为460、458、326，这足以证明 iPhone 14 Pro 的屏幕更清晰。

由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算PPI:

$PPI=\frac{\sqrt{水平像素点^2+垂直像素点^2}}{屏幕尺寸}$

iPhone 14 Pro的 ppi = $\frac{\sqrt{2556^2+1179^2}}{6.1}$ = 461.444

那它每英寸约含有 461 个物理像素点。（计算结果和上面稍有偏差）

2.6、DPI

DPI(Dot Per Inch)：即每英寸包括的点数。

这里的点是一个抽象的单位，它可以是屏幕像素点、图片像素点也可以是打印机的墨点。

平时你可能会看到使用 DPI 来描述图片和屏幕，这时的 DPI 应该和 PPI 是等价的，DPI 最常用的是用于描述打印机，表示打印机每英寸可以打印的点数。

一张图片在屏幕上显示时，它的像素点数是规则排列的，每个像素点都有特定的位置和颜色。

当使用打印机进行打印时，打印机可能不会规则的将这些点打印出来，而是使用一个个打印点来呈现这张图像，这些打印点之间会有一定的空隙，这就是 DPI 所描述的：打印点的密度。

所以，打印机的 DPI 越高，打印图像的精细程度就越高，同时这也会消耗更多的墨点和时间。

2.7、设备像素（物理像素）

设备像素（device pixels）也叫物理像素，物理像素是固定的，指的是显示器上的真实像素，屏幕出厂以后就不会再改变，也就是厂家在生产显示设备时就决定的实际点的个数。对于不同设备，物理像素点的大小是不一样的。（设备控制显示的最小单位，我们常说的1920*1080 分辨率用的就是物理像素单位）

如果都使用物理像素就会带来问题，举个例子：

21英寸显示器的分辨率是1440x1080，5.8英寸的iPhone X的分辨率是2436×1125，我们用CSS画一条线，其长度是20px，如果都以物理像素作为度量单位，那么在显示器上看起来正常，在iPhone X屏幕上就变得非常小。

2.8、设备独立像素（逻辑像素）

设备独立像素（device independent pixels）是操作系统定义的一种像素单位，应用程序将设备独立像素告诉操作系统，操作系统再将设备独立像素转化为设备像素，从而控制屏幕上真正的物理像素点。

为什么需要在应用程序与设备像素之间定义这么一种单位呢？应用程序为什么直接使用设备像素？

例如：原先在 1280×720 设备分辨率的显示屏中，显示高度为 12 个设备像素的字体，现在放到设备分辨率为 2560 ×1440 的显示屏中，如果要想得到原先的大小，则需要 24 个设备像素，如果应用程序直接使用设备像素，那么编写应用程序则将变得非常困难，需要编写应用程序逻辑：字体在一些屏幕上高度为 12 个设备像素，在另一些屏幕上却需要 24 个设备像素。
因此操作系统定义了一个单位：设备独立像素。操作系统保证：用设备独立像素定义的尺寸，不管屏幕的参数如何，都能以合适的大小显示（这也是设备独立像素名字的由来）。
 
操作系统是如何做到的呢？
对于那些像素密度高的屏幕，将多个设备像素划分为一个逻辑像素。至于将多少设备像素划分为一个逻辑像素，这由操作系统决定。

对于上面的例子：“原本高度为 12 个设备像素的字体，现在高度为 24 个设备像素才能得到相同的大小”，操作系统会将一个逻辑像素定义为 2*2个 真实像素，从而设备独立像素尺寸不需要改变，而且不管在新、旧设备上，显示的尺寸大致相同。

设备独立像素与设备像素之间的比例是多少，显示器厂商和操作系统厂商会通过调查研究来得出最利于观看的比例。普遍规律是，屏幕的像素密度越高，就需要更多的设备像素来显示一个设备独立像素。

2.9、逻辑分辨率

逻辑分辨率用屏幕的 宽*高 来表示（单位：设备独立像素），我们通过操作系统的分辨率设置来改变设备独立像素的大小。

例如：屏幕的设备分辨率是1920*1200（单位：设备像素），我们可以在当前的分辨率下设置逻辑分辨率是1280*800（单位：设备独立像素）。那么横、纵方向的设备像素数量恰好是设备独立像素的1.5倍。这也意味着，设备独立像素的边长是设备像素边长的1.5倍。

2.10、设备像素比dpr

dpr（device pixel ratio） 表示设备像素比，计算公式为：DPR = 设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系，在JS中可以通过 window.devicePixelRatio 获取

• 当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；

• 当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；

• 当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。

2.11、CSS像素

在 CSS 中使用的 px 都是指 css 像素，比如 width: 128px。

==css 像素的大小是很容易变化的，当我们缩放页面的时候，元素的 css 像素数量不会改变，改变的只是每个 css 像素的大小。也就是说 width: 128px 的元素在缩放200% 以后，宽度依然是 128 个 css 像素，只不过每个 css 像素的宽度和高度变为原来的两倍。如果原本元素宽度为 128 个设备独立像素，那么缩放 200% 以后元素宽度为 256 个设备独立像素。==

css 像素与设备独立像素的关系

缩放比例就是 ==css 像素边长/设备独立像素边长==：

• 在缩放比例为 100% 的情况下，1 个 css 像素大小等于 1 个设备独立像素；
• 在缩放比例为 200% 的情况下，1 个 css 像素大小等于 (2 * 2) 个设备独立像素；