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

一些概念

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

CSS像素

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

設(shè)備像素（physical pixel）

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

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

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

所以說，物理像素和設(shè)備獨立像素之間存在著一定的對應(yīng)關(guān)系，這就是接下來要說的設(shè)備像素比。

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

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

設(shè)備像素比 = 設(shè)備像素/設(shè)備獨立像素

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

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

像素密度（pixel density）

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

?

像素密度與像素比之間的關(guān)系

?

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

?

??

轉(zhuǎn)載于:https://www.cnblogs.com/Lv2017/p/6624647.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。