CSS 分辨率和设备分辨率之间的区别

文章转自：https://ydmgirls.com/posts/ex0f74

在作为 Web 开发人员的过程当中，看到了许多 Web 开发人员都在努力理解如何在 Web 浏览器的高密度屏幕中处理 CSS 像素单元。 如今，高密度屏幕和视网膜屏幕已经出现在所有移动设备和许多其他类型的设备上。

image

这些新的高密度屏幕对我们 Web 开发人员来说是一个很大的痛点，因为当我们构建响应式网站时，我们不知道如何与屏幕分辨率相关联。 从这些新的高密度屏幕的角度来看，我们对像素是什么的理解变得不清楚。

image

如前所述，我们正在处理两种类型的分辨率：第一种分辨率是真实设备屏幕分辨率，第二种是 CSS 分辨率可测量单位。 接下来让我们更广泛地阐述它们吧。

高密度屏幕的新时代

过去，这屏幕分辨率和 CSS 分辨率是完全一样的。 但现在，在第一部智能手机开始流行的新时代——像 iPhone 4 和三星 Galaxy S1 这样的设备，它们是世界上第一个出现的高密度屏幕。

从那时起，高密度屏幕开始随处可见，而不仅仅是在智能手机上。它适用于平板电脑等设备，例如 2012 年发布的第 3 代 iPad（新 iPad），并且在过去几年中，几乎所有类型的设备都可以看到高密度屏幕：笔记本电脑屏幕和台式机屏幕 4k及以上屏幕开始出现。 如今，设备分辨率和 CSS 分辨率之间几乎没有相似之处。

CSS 分辨率和设备分辨率之间的真正区别是什么？

CSS 分辨率用于 CSS 规则中的测量，而屏幕设备分辨率是屏幕上的实际像素数。

除了这两种分辨率类型，还有密度显示，密度显示定义了屏幕分辨率和CSS分辨率之间的比例，在高密度屏幕中密度显示是不同的。

例如：

• 在 iPhone 11 中，对于每个 CSS 像素，对应着 2 个设备像素，这意味着密度显示为 2 倍。

• 在 iPhone 11 Pro 中，对于每个 CSS 像素，对应着 3 个设备像素，这意味着密度显示为 3 倍。

• 在三星 Galaxy S10 中，对于每个 CSS 像素，对应着 4 个设备像素，这意味着密度显示为 4 倍。

例子：

三星 Galaxy S10 分辨率：

设备分辨率 — 1440 像素 x 3040 像素

CSS 分辨率 — 360 像素 x 760 像素

密度显示 - 4x（密度显示为 4 倍）

为什么 CSS 像素不等于设备像素？

如果在高密度屏幕时代之前的那些年里，CSS 像素和设备像素是相同的，为什么互联网行业会在它们之间产生差异呢？

答案很简单，因为它必须这么做！ 为什么必须这样做？ 让我们以三星 Galaxy S10 等设备为例，其设备屏幕分辨率为 1440 像素 x 3040 像素。 这与普通笔记本电脑屏幕的分辨率相同，但它显示在小型设备上。 如果我们没有 CSS 分辨率和设备分辨率之间的这种差异，桌面网站将在移动设备上以全宽显示，我们无法创建真正的响应式网站，因为我们无法区分应该影响移动站点的样式和应该影响桌面的样式。

如果我们不使用设备分辨率，它的目的是什么？

我们已经得出结论，我们在 CSS 中使用 CSS 分辨率作为度量单位。 那么，我们什么时候参考设备分辨率？

设备分辨率的目的是作用于屏幕媒体、图像和视频上。

凭借这些高密度屏幕的额外像素，我们可以为这些设备提供更高密度的图像和视频，从而为这些媒体创建更清晰的视图。 是的，这意味着在三星 Galaxy S10 中，例如，针对 CSS 分辨率为 300 像素的图像，您可以加载高达 1200 像素的图像！ 例子：

好啦，以上就是CSS 分辨率和设备分辨率之间的区别。