設備像素,設備獨立像素,CSS像素

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

一些概念css

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

CSS像素編程

CSS像素是Web編程的概念,獨立於設備的用於邏輯上衡量像素的單位,也就是說咱們在作網頁時用到的CSS像素單位,是抽象的,而不是實際存在的。瀏覽器

設備像素(physical pixel)spa

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

設備獨立像素(density-independent pixel)翻譯

設備獨立像素(也叫密度無關像素),能夠認爲是計算機座標系統中得一個點,這個點表明一個能夠由程序使用的虛擬像素(好比: css像素),而後由相關係統轉換爲物理像素。code

因此說,物理像素和設備獨立像素之間存在着必定的對應關係,這就是接下來要說的設備像素比blog

在必定的條件下二者它們二者是能夠相等的,好比:在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的值越高,畫質越好,也就是越細膩。

 

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

 

雖然設備像素密度值越高,即每英寸中所顯示像素數越多,設備屏幕中圖像越清晰。可是設備像素密度值與設備像素比之間並無直接關係。

相關文章
相關標籤/搜索