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

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

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

（当然，我知道缩放和视口。所以我用来处理这个问题。因此，我的站点中的所有内容都以正确的缩放方式显示。）

那么，这种大小差异意味着什么呢？在一些来源上，我读到我的网站上的元素的大小并不取决于我的设备的屏幕分辨率。例如:

如果我把网页设计成320像素宽（以前是iPhone3的全宽），现在会不会只有iPhone4屏幕宽度的一半呢？那就不好了，因为在一半大小的情况下内容就太小了！幸运的是，情况并非如此，因为被编码到HTML/CSS中的320个像素不再与所有显示器具有一对一的关系:在1x显示器上:HTML/CSS中的1个像素宽度=屏幕上的1个像素宽度在2x显示器上:HTML/CSS中的1个像素宽度=屏幕上的2个像素宽度浏览器知道显示器的分辨率，并将HTML/CSS像素转换为硬件像素。来源

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

有人能给我解释一下为什么我的元素在不同的设备上显示得更小更大吗？谢谢:）