之前學了移動端的開發對設備像素、設備獨立像素、CSS像素弄得不太清楚，所以趁周末的時間查了一下，稍加整理

一些概念

在進行具體的分析之前，首先得知道下面這些關鍵性基本概念。

CSS像素

CSS像素是Web編程的概念，獨立于設備的用于邏輯上衡量像素的單位，也就是說我們在做網頁時用到的CSS像素單位，是抽象的，而不是實際存在的。

設備像素（physical pixel）

設備像素又稱物理像素，一個物理像素是顯示器(手機屏幕)上最小的物理顯示單元，在操作系統的調度下，每一個設備像素都有自己的顏色值和亮度值。

設備獨立像素（density-independent pixel)

設備獨立像素(也叫密度無關像素)，可以認為是計算機坐標系統中得一個點，這個點代表一個可以由程序使用的虛擬像素(比如: css像素)，然后由相關系統轉換為物理像素。

所以說，物理像素和設備獨立像素之間存在著一定的對應關系，這就是接下來要說的設備像素比。

在一定的條件下兩者它們兩者是可以相等的，比如：在PC端瀏覽器默認情況下（100%，即頁面沒被縮放），一個物理像素 = 一個設備獨立像素。而在移動端可就不一樣的，這兩個值很多時候是不相等的。這就用到了設備像素比（devicepixelratio）：

設備像素比(簡稱dpr)定義了物理像素和設備獨立像素的對應關系，它的值可以按如下的公式的得到：

設備像素比 = 設備像素/設備獨立像素

在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現的大小(物理尺寸)是一致的，不同的是1個css像素所對應的物理像素個數是不一致的。

在普通屏幕下，1個css像素 對應 1個物理像素(1:1)。 在retina 屏幕下，1個css像素對應 4個物理像素(1:4)。這樣在同樣的大小的屏幕尺寸下dpr越大的屏幕上顯示的css像素就越多，因此而越清晰。

像素密度（pixel density）

簡稱是（ppi）翻譯下就是每英寸內有多少個像素點，這個像素點指的是設備像素點（物理像素）。PPI的值越高，畫質越好，也就是越細膩。

?

像素密度與像素比之間的關系

?

雖然設備像素密度值越高，即每英寸中所顯示像素數越多，設備屏幕中圖像越清晰。但是設備像素密度值與設備像素比之間并沒有直接關系。

?

??

轉載于:https://www.cnblogs.com/Lv2017/p/6624647.html

總結

以上是生活随笔為你收集整理的设备像素，设备独立像素，CSS像素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。