Css样式引发的思考

问题

作为一个不擅长css的前端，经常会遇见一个问题。就是同样宽度的元素在我的mac4k屏幕上，跟同事的windows 1980x1080的屏幕上展示的大小不一致，导致开发完在别人的电脑上样式会很奇怪。

很苦恼，为什么？？？

终于决定搞懂其中的诡异： 像素密度（PPI，Pixels Per Inch）是用来衡量屏幕上每英寸内的像素数量的指标。它决定了屏幕上图像和文本的清晰度。PPI 的计算公式如下：

计算步骤

1. 获取屏幕的分辨率：水平像素数和垂直像素数。
2. 获取屏幕的物理尺寸：屏幕的对角线长度（英寸）。
3. 计算 PPI：使用上述公式。

例子

假设你有两个屏幕：

1. 屏幕 A: 分辨率为 1920x1080，尺寸为 24 英寸。
2. 屏幕 B: 分辨率为 3840x2160（4K），尺寸为 27 英寸。

屏幕 A 的 PPI 计算

• 分辨率：1920x1080
• 尺寸：24 英寸

屏幕 B 的 PPI 计算

• 分辨率：3840x2160
• 尺寸：27 英寸

总结：

• 显示器 A 的 PPI 约为 91.7。
• 显示器 B 的 PPI 约为 163.2。

  PPI是什么？

  1. 像素密度（PPI）的影响

  像素密度（PPI）决定了屏幕上每英寸内的像素数量。高 PPI 意味着在相同的物理尺寸下，屏幕上有更多的像素。

2. 操作系统的缩放设置

在 macOS 和 Windows 上，用户可以调整显示器的缩放设置（如 100%、125%、200% 等）。这些缩放设置会影响元素的实际显示宽度。

例子

假设你在两个显示器上都使用 100% 的缩放设置：

• 显示器 A 上的 200px div 的实际物理宽度为：

• 显示器 B 上的 200px div 的实际物理宽度为：

3. 实际显示效果

在相同的缩放设置下，200px 的 div 在两个显示器上的实际物理宽度会有所不同。显示器 B 上的 div 会比显示器 A 上的 div 显得更小，因为显示器 B 的 PPI 更高。

4. 缩放设置的影响

如果你在显示器 B 上使用 200% 的缩放设置，那么 200px 的 div 的实际物理宽度会变为：

在这种情况下，200px 的 div 在显示器 B 上的实际物理宽度会比显示器 A 上的 div 显得更大。

总结

• 像素密度（PPI）：高 PPI 的显示器上，相同宽度的元素会显得更小。
• 缩放设置：操作系统的缩放设置会影响元素的实际显示宽度。

因此，一个宽度为 200px 的 div 在 1920 像素和 4K 的两个显示器上展示的宽度会有区别，但这主要取决于显示器的像素密度和操作系统的缩放设置。