資訊專欄INFORMATION COLUMN
摘要：設備獨立像素是一個整體概念，包括了像素，比如像素，只是在機中，像素不叫像素了，而叫設備獨立像素。設備像素和獨立設備像素的關系實例已為例設備寬高為，可以理解為設備獨立像素或像素。獲得設備像素比后，便可得知設備像素與像素之間的比例。
1.概念
設備像素（device pixel）簡寫DP
設備像素又稱 **物理像素** ，是設備能控制顯示的最小單位，我們可以把它看做顯示器上的一個點。我們常說的 1920x1080像素分辨率就是用的設備像素單位。
css像素（css pixel）
css像素是 **web編程的概念** ，它是 **抽象的** ，實際上 **不存在** 。用于邏輯上衡量像素的單位。也就是我們做網頁時用到的css像素單位。
設備獨立像素（Device Independent Pixel）簡寫DIP
設備獨立像素也叫 密度無關像素 ，可以認為是計算機坐標系統中的一個點，這個點表示一個可以由程序使用并控制的虛擬像素，可以由相關系統轉換為物理像素。設備獨立像素是一個整體概念，包括了css像素，比如:css像素，只是在android 機中，css像素不叫 “css像素了”，而叫“設備獨立像素”。
2.關系因為設備獨立像素是包含了css像素的大類，所以我們這里只討論 設備像素 和 設備獨立像素 的關系
PC端
1個設備獨立像素等于1個設備像素（在100% 未縮放的情況下），如果縮放到200%，則1個設備獨立像素等于2個設備像素
移動端
根據設備不同，有很大差異
在詳細闡述設備像素和獨立設備像素 的關系前我們先了解兩個概念，ppi 和dpr
PPI 像素密度（pixel per inch）
PPI翻譯過來就是每英寸有多少個像素點(這里的像素指的是設備像素，既物理像素)，說的直白點PPI就是**像素密度** pixel density），PPI的值越高，畫質越好，看起來更有逼格。那么PPI是怎么計算出來的呢，看公式
計算公式：
我們不妨用上面的公式做做數學題,見下圖：
下面我們來計算一下 iphone6 plus 的ppi;
var ppi = sqrt(1920X1920+1080X1080)/5.5; 計算結果ppi 為 400.528576，實際上會有出入，但這沒關系。
好了我們還是回到上面的問題：兩者（設備像素和設備獨立像素）是如何進行換算的？它們是通過設備像素比(dpr,device pixel ratio)來進行換算的。那么什么是設備像素比呢？
DPR (device pixel ratio) 設備像素比
1.設備像素比定義了設備像素和設備獨立像素的轉換關系(告訴你一個設備像素對應多少個獨立設備像素(既css像素))，計算式為：
在javascript中，可以通過window.devicePixelRatio獲取到當前設備的dpr。在css中，可以通過-webkit-device-pixel-ratio，webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio進行媒體查詢，對不同dpr的設備，做一些樣式適配(這里只針對webkit內核的瀏覽器和webview)。
2.設備像素的大小是固定的，是不可變的。而設備獨立像素是可以被拉長或壓縮的。這個該怎么理解呢看圖。
下面我們來看個現實中的例子，Iphone 5s 使用的是 Retina 視網膜屏幕，什么是Retina視網膜屏幕？PPI 值超過 300 的叫做超高密度屏幕，只是 Apple 給它換了個高大尚的名稱：Retina 視網膜屏幕而已。
在做移動頁面開發的時候，相信你經常會遇到這種情況：在不同的手機上看時，里面的圖片、文字或者線的大小會不一樣，有時候大小區別還非常地大。原因就是剛才說到的設備像素比在作怪。
你想啊，如果在普通屏即標準 PPI下一個設備光點對應一個 CSS 像素時，頁面不大不小，完美地渲染出來了。但在現在這個高逼格的年代，標準 PPI 已經很少見了。更多的是 Retina視網膜設備。而設備像素比不同的品牌的手機這個值也是不一樣的。即使是同一個品牌的手機也不一樣。你比如 Iphone 5s 設備像素比為2，Iphone 6s 設備像素比為3。至于安卓機中的設備像素比就更多了，有1.3、1.5、2、3等等。
3.設備像素和獨立設備像素的關系(實例)已iphone6 為例：
設備寬高為375×667，可以理解為設備獨立像素(或css像素)。 dpr為2，根據上面的計算公式，其物理像素就應該×2，為750×1334。
上圖中可以看出，對于這樣的css樣式：
width: 2px;
height: 2px;
在不同的屏幕上(普通屏幕 vs retina屏幕)，css像素所呈現的大小(物理尺寸)是一致的，不同的是1個css像素所對應的物理像素個數是不一致的。
在普通屏幕下，1個css像素 對應 1個物理像素(1:1)。 在retina 屏幕下，1個css像素對應 4個物理像素(1:4)。
設備像素與CSS像素之間的換算是如何產生的呢？，這就要談到ppi 和 dpr,以上計算出ppi是為了得到密度分界，獲得默認縮放比例，即設備像素比。
由上圖可知，ppi在120-160之間的手機被歸為低密度手機，160-240被歸為中密度，240-320被歸為高密度，320以上被歸為超高密度（Apple給了它一個高大上的名字——Retina）。
獲得設備像素比后，便可得知設備像素與CSS像素之間的比例。當這個比率為1:1時，使用1個設備像素顯示1個CSS像素。當這個比率為2:1時，使用4個設備像素顯示1個CSS像素，當這個比率為3:1時，使用9（3*3）個設備像素顯示1個CSS像素。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113629.html
摘要：設備像素設備分辨率設備像素也叫物理像素。從圖中可以驗證，橫縱方向的設備像素數量恰好是設備獨立像素的倍。像素與設備獨立像素的關系縮放比例就是像素邊長設備獨立像素邊長。因為的寬度沒有改變，無論以什么單位衡量設備像素設備獨立像素還是像素。 這篇文章是我在我的舊博客上發過的文章，最近又碰到這個問題，整理修改了一下發到這里。 像素單位 像素單位有設備像素、邏輯像素和CSS像素3種。 設備像素（d...
摘要：我們用小米舉例，屏幕像素物理像素為，設備獨立像素為，也就是說，一個設備獨立像素就包含個物理像素，同時我們能得出。 本文主要闡述移動端布局中常遇到的一些基本概念，這些概念也適用于PC端，這些概念大概有：像素（pixel），ppi，分辨率，物理像素（physical pixel）， CSS像素，設備獨立像素（devicedependent pixel） 像素 像素是圖像顯示的基本單位，同時...
摘要：最近在研究屏的適配問題，在具體方案討論之前，陸續做了一些理解筆記，現歸納如下。 最近在研究 Retina 屏的適配問題，在具體方案討論之前，陸續做了一些理解筆記，現歸納如下。具體方案的討論將另作文章。 中的 viewport 是布局視口 initial-scale 等的縮放是基于理想視口的 理想視口由設備各自提供，理想視口的寬度也是設備的獨立像素 所謂獨立是說這個設備獨立像素和像素...
摘要：設備像素比設備像素比簡稱定義了物理像素和設備獨立像素的對應關系，它的值可以按如下的公式的得到設備像素比物理像素設備獨立像素在某一方向上，方向或者方向在中，可以通過獲取到當前設備的。 視覺稿 在前端開發之前，視覺MM會給我們一個psd文件，稱之為視覺稿。 對于移動端開發而言，為了做到頁面高清的效果，視覺稿的規范往往會遵循以下兩點： 首先，選取一款手機的屏幕寬高作為基準(以前是iphone...
摘要：設備像素比設備像素比簡稱定義了物理像素和設備獨立像素的對應關系，它的值可以按如下的公式的得到設備像素比物理像素設備獨立像素在某一方向上，方向或者方向在中，可以通過獲取到當前設備的。 視覺稿 在前端開發之前，視覺MM會給我們一個psd文件，稱之為視覺稿。 對于移動端開發而言，為了做到頁面高清的效果，視覺稿的規范往往會遵循以下兩點： 首先，選取一款手機的屏幕寬高作為基準(以前是iphone...
閱讀 1698·2023-04-26 01:02
閱讀 4840·2021-11-24 09:39
閱讀 1803·2019-08-30 15:44
閱讀 2872·2019-08-30 11:10
閱讀 1783·2019-08-30 10:49
閱讀 984·2019-08-29 17:06
閱讀 609·2019-08-29 16:15
閱讀 902·2019-08-29 15:17
