物理像素 css像素

1px ：设备独立像素/逻辑像素/css像素
物理像素（发光点）：3840 × 2160（4K 硬件真实像素）
DPR === Math.sqrt( (物理像素)/(设备独立像素/逻辑像素/css像素/1px ) )
DPR = 1：1 个 CSS px = 1 个物理像素 （1*1 网格）
DPR = 2：1 个 CSS px = 4 个物理像素（2*2 网格）
DPR = 3：1 个 CSS px = 9 个物理像素（3*3网格）

PPI === 像素的密度 === √(宽度设备像素² + 高度设备像素²) / 27英寸 （一英寸上所有像素点，斜边构成的正方形）
常见例子：
- Apple Studio Display（27 英寸 5K）：218 PPI（Apple 推荐的最佳密度）。
- 27 英寸 4K 显示器：约 163 PPI。
- 32 英寸 4K：约 138 PPI。
- 超宽 34-40 英寸 5K2K：约 110-140 PPI。
对角线英寸数 = √(宽度设备像素² + 高度设备像素²) / PPI
3840 ** 2 + 2160 ** 2
19411200
Math.sqrt(19411200)/163
27.029535829230653 英寸

分辨率 ：它是固定的硬件属性，决定屏幕能显示多少细节（物理发光点），分辨率影响的是多少个物理像素渲染1px(1个逻辑像素)
项目写固定px 影响：
1920 * 1080 和3840 * 2160 分辨率在100%窗口下：
宽度为240px为什么在1920*1080分辨率下下看着比3840*2160分辨率下的要大 因为1920*1080分辨率下需要4个物理像素合成1px 而3840 * 2160分辨率是1个物理像素合成1px，所以1920 * 1080 分辨率的长度和宽度分别是3840 * 2160分辨率的长度和宽度的2倍
解决方案：
以宽度为例
按照视口给固定的宽度 vw 240/1920 = 占用视口宽度/100vw
被除数就是真实占用视口宽度 （可理解为一把尺子量出来的宽度）
1920 * 1080分辨率的计算公式为：占用视口宽度 = 240/1920 * 100vw
（视口宽度 这个为固定值无论屏幕变的多大）
如何做到分辨率1920*1080 和 3840 *2160下显示的宽度是一样大的
计算公式为：
px/3840 = 占用视口宽度/100vw px = 480px
中间逻辑：
1.dpr为1时3840*2160分辨率渲染1px 占用1个物理像素
2.dpr为2时1920*1080分辨率渲染1px 占用4个物理像素
举个例子 1920 * 1080分辨率下 一个宽度为240px 高度为240px 的元素 则在3840 * 2160分辨率下 表现为宽度480px 高度480px
在1920*1080分辨率下渲染的物理像素为240 * 240 * 4,在3840*2160分辨率下渲染的物理像素为480 * 480 他们所占用真实的物理像素是相同的 所以看着是面积一样大的

反推公式
PPI 的定义公式是：
PPI = 对角线像素数 / 对角线英寸数
所以，反过来：
对角线像素数 = PPI × 对角线英寸数
然后用这个对角线像素数，结合宽高比例，反推总像素点。
以你的 27 英寸 4K 为例 一步步计算
1. 算出对角线上的总像素数
对角线像素数 ≈ 163 × 27 ≈ 4401 个像素（精确算 163.18 × 27 ≈ 4405.86）
2. 已知这是 16:9 比例的屏幕（4K 标准比例）
- 宽高比 = 16:9 → 宽度像素 = (16/9) × 高度像素
- 对角线像素数² = 宽度像素² + 高度像素²（勾股定理）
3. 设高度像素 = h，则宽度像素 = (16/9) h
对角线像素数² = [(16/9)h]² + h² = h² × (256/81 + 1) = h² × (256/81 + 81/81) = h² × (337/81)
4. 所以：
h = 对角线像素数 / √(337/81)
≈ 4405.86 / √(337/81) ≈ 4405.86 / 2.041 ≈ 2159.5（约 2160）
5. 宽度 = (16/9) × 2160 ≈ 3840
6. 总像素点 = 宽度 × 高度
3840 × 2160 = 8,294,400 ≈ 800 多万（829 万）