我試圖理解設備像素、css像素和設備無關像素的區別。坦白說，我有點困惑。

昨天，我在兩臺設備上測試了我的網站。有我的智能手機(像素比:2.5)和筆記本電腦(像素比:1)。我得到了什么？我的智能手機顯示所有較小的東西，我的筆記本電腦顯示所有較大的東西。比如我有這個元素。

結果，我的手機上是1.6厘米，筆記本電腦上是2.5厘米。

(當然，我知道縮放和視口。所以我用& ltmeta name = & quot視窗& quotcontent = & quot初始比例= 1 & quot& gt。因此，我的站點中的所有內容都以正確的比例顯示。)

那么，這種大小差異意味著什么呢？在一些資料上，我讀到我的網站上的元素的大小并不取決于我的設備的屏幕分辨率。例如:

如果我設計了一個320像素寬的網頁(這曾經是iPhone 3的寬度),它現在會只有iPhone 4屏幕寬度的一半嗎？那就不好了，因為一半大小的內容就太小了！幸運的是，情況并非如此，因為編碼到HTML/ CSS中的320像素不再與所有顯示器一一對應:在1x顯示器上:HTML/ CSS中的1像素寬度= 2x顯示器上的1像素寬度:HTML/CSS中的1像素寬度=屏幕上的2像素寬度瀏覽器知道顯示器的分辨率，并將HTML/CSS像素轉換為硬件像素。 源頭

我曾經認為，我用來建立我的寬度/高度的CSS像素獨立于負責分辨率的物理像素。這就是為什么我認為100個CSS像素在不同分辨率的不同設備上總是占據相同的空間。

有人能解釋一下為什么我的元素在不同的設備上顯示得越來越小嗎？謝謝大家！

這是因為所有設備都有自己的像素大小。例如，筆記本電腦中的1px和智能手機中的1px在大小上是不同的。筆記本電腦中的1px比智能手機中的大。這就是為什么建議使用vh、vw、em和rem等相對值來確定元素的大小。這是因為這些值有助于防止元素在不同設備中改變大小。例如，不要在px中設置你的字體大小，你應該使用em來保持你的字體大小在所有設備中都是一樣的。如果您使用像素值作為字體大小，字體的大小在不同的設備上會有所不同，因為每個設備都有不同的像素大小。相對值不會改變，如果你對你的元素做了100vw，它將總是占據你的屏幕寬度的100%,不管你的設備類型是什么。

我在尋找在筆記本電腦和智能手機上打開網站時不同行為的原因，兩者的分辨率完全相同。我降落在這里，并沒有得到真正的答案。但是后來我找到了一篇媒體文章，很好地解釋了這個概念，我終于明白了。如果你是因為和我一樣的原因來到這里，請務必檢查一下！

下面是文章的重要部分:

CSS分辨率和設備分辨率的真正區別是什么？

CSS分辨率用于CSS規則中的測量，屏幕設備分辨率是屏幕上的實際像素數。

除了這兩種分辨率類型，還有密度顯示，它定義了屏幕分辨率和CSS分辨率之間的比率，在高密度屏幕中有所不同。