設備像素比（Device Pixel Ratio, DPR）：其實指的是 window.devicePixelRatio, 被所有WebKit瀏覽器以及Opera所支持诡必，一個設備的物理像素與邏輯像素之比奢方。
DPR = 物理像素(設備像素) / 獨立像素(CSS像素)
當像素比為1:1時，使用1個物理像素顯示1個CSS像素爸舒；當像素比為2:1時蟋字，使用4個物理像素顯示1個CSS像素；當像素比為3:1時扭勉，使用9（33）個設備像素顯示1個CSS像素*鹊奖。
像素為什么會有“物理”和“邏輯”之分，它們之間什么區(qū)別涂炎？
其實在很久以前忠聚，的確是沒區(qū)別的，CSS里寫個 1 px 唱捣，屏幕就給你渲染成1個實際的像素點两蟀，DPR=1，多么簡單自然~
后來蘋果公司為其產(chǎn)品mac震缭、iPhone以及iPad的屏幕配置了Retina高清屏赂毯，也就是說這種屏幕擁有的物理像素點數(shù)比非高清屏多4倍甚至更多。如果還按照DPR=1進行展示拣宰，那么同一張圖片在高清屏上面顯示的區(qū)域面積會是非高清屏的1/4党涕，這樣的話由于圖片在屏幕上的展示面積大大縮小，也會導致出現(xiàn)“看不清”的問題巡社。
舉個例子膛堤，iPhone 6的物理像素上面已經(jīng)說了，是 750 * 1334晌该，那它的邏輯像素呢肥荔？我們只需在 iPhone 6 的Safari里打印一下 screen.width 和 screen.height 就知道了绿渣，結果是 375 * 667，這就是它的邏輯像素次企，據(jù)此很容易計算出 DRP為2怯晕。當然，我們還可以直接通過 window.devicePixelRatio 這個值來獲取 DRP缸棵，打印結果是 2舟茶，符合我們的預期。
舉例：
設備寬高為 375×667堵第，可以理解為設備獨立像素(或css像素)吧凉，dpr為2，根據(jù)上面的計算公式踏志，其物理像素就應該 ×2阀捅，為 750×1334。
上圖中可以看出针余，對于這樣的css樣式：
width: 1px;
height: 1px;
相同尺寸下饲鄙，普通屏幕 VS Retina 屏，css像素所呈現(xiàn)的物理尺寸（大性惭恪）是一致的忍级，不同的是一個css像素所對應的物理像素的個數(shù)不一致：
- 普通屏幕：css像素：物理像素 = 1:1
- retina屏： css像素：物理像素 = 1:4
即4個物理像素顯示一個css像素；
從以上現(xiàn)象得出的結論是：
UI設計師按照手機物理像素出設計稿伪朽，切圖時根據(jù)其設備像素比來換算設備獨立像素（CSS像素）轴咱，比如視網(wǎng)膜手機iPhone6，物理像素 750px×1334px烈涮，由于其設備像素比為2朴肺，CSS切圖時需要將設計稿的所有尺寸除以2，才是正確CSS像素值坚洽。
