一、基本概念

（1） CSS pixels與device pixels

CSS pixels： 瀏覽器使用的抽象單位， 主要用來(lái)在網(wǎng)頁(yè)上繪制內(nèi)容。

device pixels： 顯示屏幕的的最小物理單位，每個(gè)dp包含自己的顏色、亮度。

等值的 CSS pixels在手機(jī)屏幕上占多大的位置，這不是固定的，這取決于很多屬性。經(jīng)過(guò)分析和總結(jié)，我們可以得出這么一條公式： 1 CSS pixels = （devicePixelRatio）^2 device pixels （^2是平方的意思，至于 devicePixelRatio是什么東西，后面會(huì)講解） 。

（2） PPI/DPI

PPI，有時(shí)也叫DPI，所表示的是每英寸所擁有的像素（pixel）數(shù)目，數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。（注：這里的像素，指的是device pixels。）搞清楚了PPI是什么意思，我們就能很容易理解PPI的計(jì)算方式了，我們需要首先算出手機(jī)屏幕的對(duì)角線等效像素，然后處以對(duì)角線（我們平常所說(shuō)的手機(jī)屏幕尺寸就是說(shuō)的手機(jī)屏幕對(duì)角線的長(zhǎng)度），就可以得到PPI了。準(zhǔn)確的計(jì)算公示大家可以參照下圖。比較有意思的是，根據(jù)公式計(jì)算出來(lái)的iPhone 4的PPI為330，要比蘋果官方公布的326要高一點(diǎn)點(diǎn)。