一.分辨率
- 概念
我们通常见到的分辨率都是以 1920x1080 这种形式存在，其中1920和1080这两个数字分别代表设备水平方向上和垂直方向上的像素点数量。这两个数字的乘积，即代表设备上的像素点总和，由此我们平常所说的分辨率即是 像素点总数。
- 屏幕尺寸
如果我们打开某款显示屏的购买页面，我们通常以下能看到几个信息：
- 24.5英寸 屏幕尺寸
- 170Hz 刷新率
- 1920*1080 分辨率
其中，代表屏幕尺寸的参数
24.5英寸它的真实含义为：显示器的对角线长度；试想，如果只有分辨率一个参数，是无法真正描述这款显示屏清晰度的，就像如果我跑了五公里不能说我跑的很快，但如果我12分37秒跑了五公里就可以说我跑的很快😄。
- PPI和DPI
除了用屏幕尺寸+分辨率的方式外，我们还可以用PPI/DPI来描述显示屏的清晰度。（当我们用于描述显示器时，这两个概念是相同的）
-- 计算方式
X:长度像素数；Y:宽度像素数；Z:屏幕尺寸
-- PPI(Pixels Per Inch)
PPI是每英寸像素数的缩写，指的是在每英寸的区域内可以显示的像素数量。它通常用于描述显示器、屏幕、移动设备或其他电子设备的分辨率，即每英寸的物理像素数量。该值越高则显示屏画面细节更丰富。
-- DPI(Dot Per Inch)
DPI是每英寸点数的缩写，指的是在每英寸的区域内可以打印或扫描的点的数量。它通常用于描述打印机、扫描仪或其他输出设备的分辨率。
- “像素”只存在于电脑显示领域
- “点”只出现于打印或印刷领域
- 关于打印机的点距我们不去关心，只要知道 当用于描述显示器设备时PPI与DPI是同一个概念
-- 分辨率，DPI和屏幕尺寸三者影响关系
- 相同的分辨率，更高的DPI表现为物理尺寸更小
- 物理尺寸相同，较低的DPI表现为较低的分辨率
- 相同物理尺寸，较低的分辨率表的为DPI更小
如下图所示：在屏幕尺寸固定的情况下，当我们使用更小的分辨率时，屏幕上的文本、图标等元素就会变大；反之则变小。
这是因为操作系统的文本图标所占用的像素数是固定的，使用小分辨率时，每个像素就会变大，因此文本也会相应变大。
二.像素
物理像素(Device Pixel)
物理像素是指显示器或其他数字显示设备上的实际像素，它们是硬件上的物理点或单元，用于显示图像或文本。每个物理像素都由一个红、绿、蓝（RGB）子像素组成，可以独立地发光或关闭，从而产生所需的颜色和亮度。 物理像素是在显示器出厂的时候就已经确定好了的。
逻辑像素(CSS Pixel)
在Web开发中使用的一种抽象单位。
浏览器内的一切长度都是以CSS像素为单位的，CSS像素的单位是px，px是一个相对单位，相对的是设备物理像素(device pixel)，其相对性体现在在同一个设备上或在不同设备之间每1个px所代表的物理像素是可以变化的
在我们前端的日常开发中，我们代码中常用的用于标注字体大小的单位——px，便是逻辑像素。
在浏览器中，也可以通过screen.width和screen.height来获取浏览器的逻辑像素
