屏幕分辨率会影响我网站元素的大小吗？

Question

我试图了解设备像素、css 像素和与设备无关的像素之间的区别。坦率地说，我有点困惑。

昨天我在两台设备上测试了我的网站。有我的智能手机（像素比：2.5）和笔记本电脑（像素比：1）。我得到了什么？我的智能手机显示一切更小，我的笔记本电脑显示一切更大。比如我有这个元素。

结果，在我的手机上是 1.6 厘米，在我的笔记本电脑上是 2.5 厘米。

（当然，我知道缩放和视口。所以我用<meta name="viewport" content="initial-scale=1"> 处理了这个问题。所以，我网站中的所有内容都以正确的比例显示。）

那么，这种尺寸差异意味着什么？在一些资料中，我读到我网站上元素的大小不取决于我设备的屏幕分辨率。例如：

如果我将网页设计为 320 像素宽（以前是 iPhone 3 的全宽），现在它会不会只有 iPhone 4 屏幕宽度的一半？那可不好，因为内容太小，只有一半大小！幸运的是，情况并非如此，因为编码为 HTML/CSS 的 320 像素不再与所有显示器具有一对一的关系： 在 1x 显示器上：HTML/CSS 中的 1 像素宽度 = 屏幕上的 1 像素宽度在 2x 显示器上：HTML/CSS 中的 1 像素宽度 = 屏幕上的 2 像素宽度 浏览器知道显示器的分辨率，并将 HTML/CSS 像素转换为硬件像素。 The source

我曾经认为用于确定宽度/高度的 CSS 像素独立于负责分辨率的物理像素。这就是为什么我认为 100 个 CSS 像素在不同分辨率的不同设备上总是占据相同的空间。

谁能向我解释为什么我的元素在不同的设备上显示越来越小？谢谢！

Answer 1

这是因为所有设备都有自己的像素大小。例如，笔记本电脑中的 1px 和智能手机中的另一个 1px 在大小上是不一样的。笔记本电脑中的 1px 比智能手机中的大。这就是为什么建议使用诸如vh、vw、em 和rem 等相对值来确定元素大小的原因。这是因为此值将有助于防止您的元素在不同设备中更改其大小。例如，不要在px 中设置您的字体大小，而应该使用em 来保持您的字体大小在所有设备中始终相同。如果您使用px 值作为字体大小，则字体大小将在不同设备中发生变化，因为每个设备具有不同的像素大小。相对值不会改变，如果您对元素执行 100vw，它将始终占据100% 的屏幕宽度，无论设备类型如何，例如。