在頁(yè)面開(kāi)發(fā)過(guò)程中衔彻，對(duì)于設(shè)計(jì)給的設(shè)計(jì)稿薇宠，一般的PC頁(yè)面開(kāi)發(fā)的時(shí)候，很簡(jiǎn)單艰额，使用px為單位澄港，給多少px就標(biāo)注多少。但是到了移動(dòng)端的web開(kāi)發(fā)柄沮，一般標(biāo)注的單位是dp回梧，這對(duì)于css里面px單位就需要轉(zhuǎn)換一下了，這邊簡(jiǎn)單說(shuō)明一下相關(guān)點(diǎn)祖搓。
幾個(gè)概念
設(shè)備像素
設(shè)備像素狱意，也叫物理像素，先來(lái)看看很多資料上面的描述
它是物理概念拯欧，指的是設(shè)備中使用的物理像素(Physic pixel)详囤。這個(gè)單位用px表示，它是一個(gè)[相對(duì)絕對(duì)單位]镐作，即在同樣一個(gè)設(shè)備上纬纪，每1個(gè)設(shè)備像素所代表的物理長(zhǎng)度(如英寸)是固定不變的(即設(shè)備像素的絕對(duì)性); 但在不同的設(shè)備之間，每1個(gè)設(shè)備像素所代表的物理長(zhǎng)度(如英寸)是可以變化的(即設(shè)備像素的相對(duì)性);
設(shè)備像素就是這個(gè)設(shè)備上總共有多少個(gè)這樣的單位像素
CSS像素（設(shè)備獨(dú)立像素）
這個(gè)也是一個(gè)相對(duì)單位,所以它在一個(gè)設(shè)備中具體表現(xiàn)為多少不確定,除受到設(shè)備寬度影響外還有以下兩點(diǎn)可以影響它滑肉。
- 屏幕布局視口大小
-
屏幕的分辨率
而我們?cè)谡鎸?shí)編碼過(guò)程中使用的就是這個(gè)CSS像素包各，下面說(shuō)一下CSS像素和設(shè)備像素的關(guān)系
物理像素和CSS像素的關(guān)系
可見(jiàn)，在兩塊不同的屏幕上面靶庙，相同的CSS像素问畅，其展示效果一直，大小相等，但是其底層的物理像素點(diǎn)的個(gè)數(shù)會(huì)有較大的區(qū)別护姆。
DPR（設(shè)備像素比）
關(guān)于這個(gè)值矾端，我們有如下公式
DPR = 物理像素點(diǎn)的個(gè)數(shù)/CSS像素點(diǎn)的個(gè)數(shù)
舉例：
若DPR=3，則1CSS像素點(diǎn)等于3物理像素點(diǎn)卵皂，具體效果見(jiàn)上圖秩铆。
那我們?nèi)绾潍@取一臺(tái)手機(jī)的DPR呢，在js里面灯变，可以通過(guò)window.devicePixelRatio來(lái)獲取該值殴玛，而我們知道，screen.width可以獲取屏幕的寬度
<html>
<div id="id1"></div>
<div id="id2"></div>
<script>
document.querySelector("#id1").innerHTML=screen.width;
document.querySelector("#id2").innerHTML=window.devicePixelRatio;
</script>
</html>
在華為手機(jī)（1080*1920）上面顯示的話添祸，就是360和3滚粟，可見(jiàn)公式是OK的，1080/360=3
DP（密度無(wú)關(guān)像素 ）
一般這個(gè)單位多見(jiàn)于android上面的布局刃泌，其作用是為了保證在不同設(shè)備上面同樣頁(yè)面的顯示凡壤，官網(wǎng)說(shuō)明如下
在定義 UI 布局時(shí)應(yīng)使用的虛擬像素單位，用于以密度無(wú)關(guān)方式表示布局維度 或位置耙替。
密度無(wú)關(guān)像素等于 160 dpi 屏幕上的一個(gè)物理像素亚侠，這是 系統(tǒng)為“中”密度屏幕假設(shè)的基線密度。在運(yùn)行時(shí)俗扇，系統(tǒng) 根據(jù)使用中屏幕的實(shí)際密度按需要以透明方式處理 dp 單位的任何縮放 盖奈。dp 單位轉(zhuǎn)換為屏幕像素很簡(jiǎn)單： px = dp * (dpi / 160)。 例如狐援，在 240 dpi 屏幕上钢坦，1 dp 等于 1.5 物理像素。在定義應(yīng)用的 UI 時(shí)應(yīng)始終使用 dp 單位 啥酱，以確保在不同密度的屏幕上正常顯示 UI
上面dpi為屏幕密度爹凹，Dots Per Inch(每英寸點(diǎn)數(shù))
其中w為屏幕寬度，單位px镶殷，h為屏幕高度禾酱，s為屏幕尺寸，單位英寸
DP的存在绘趋，就是為了解決android機(jī)型的不同分辨率問(wèn)題颤陶，在不同的手機(jī)上面，dp和px有如下轉(zhuǎn)換關(guān)系
上圖是px和dp的轉(zhuǎn)換關(guān)系陷遮，其中px指的是物理像素
DP和CSS像素轉(zhuǎn)換
關(guān)于DPR滓走，大致有如下的一個(gè)關(guān)系
DPR = 設(shè)備像素/CSS像素 = 設(shè)備像素 / 設(shè)備獨(dú)立像素 ~= DPI/160
一般我們需要獲取如下幾個(gè)數(shù)據(jù)
- 手機(jī)屏幕物理寬度（devicePxWidth），如1080px
- 設(shè)備像素比帽馋，即
window.devicePixelRatio的值搅方，如3 - 屏幕對(duì)應(yīng)的dp寬度（deviceDpWidth）比吭，例如360dp
獲取這3個(gè)值之后就比較簡(jiǎn)單了，以上面的數(shù)值為例姨涡，我們得知在該款手機(jī)上面衩藤，1dp=3px（物理像素），3px（物理像素）=1px（css像素）涛漂，即1dp=1px（css像素）赏表。
cssPx=dp*(devicePxWidth/deviceDpWidth/devicePixelRatio)
