移動開發畫素知識

抽象單位：可以根據不同裝置關係來變大變小。而物理畫素是固定的，不會改變。

例如：iphone5

1個css畫素 = 4個物理畫素

上圖中1136和640的單位是dp

window.devicepixelratio是裝置上物理畫素和裝置獨立畫素 (dip或dp)(device-independent pixels (dips))的比例。

公式表示就是：window.devicepixelratio = 物理畫素 / dips 1px = dpr*dpr *dp

dpi：在顯示器上就是清晰度，在滑鼠上就表示滑鼠移動的精度。

ppi: pixels per inch 每英吋所擁有的畫素數目 ppi=√（x^2+y^2）/ z （x：長度畫素數；y：寬度畫素數；z：螢幕大小）。

dpi: dots per inch 每英吋的畫素，也就是掃瞄精度。（印表機）

dpi(dot per inch 一英吋多少個畫素點) 紅公尺手機dpi計算如下(紅公尺手機解析度是1280*720): math.sqrt( math.pow(1280,2) + math.pow(720, 2) )/4.7 = 312

物理尺寸的獲取公式: math.sqrt( math.pow(寬,2) + math.pow(高, 2) )/dpi = 螢幕物理尺寸

術語說明

備註物理尺寸(screen inches)

手機實際的物理尺寸。

例如3.5英吋、3.7英吋、4.7英吋、5.0英吋

紅公尺手機是4.7英吋

解析度(resolution)

手機螢幕縱、橫方向畫素個數

紅公尺手機是1280*720

dpi(dot per inch)

每英吋畫素數。

例如160dpi，240dpi，320dpi等。

假設(320*240)解析度的螢幕物理尺寸是（2英吋*1.5英吋），dpi=160

(這裡本人認為有乙個不成文的規定:

一英吋=160dip。後邊會有試驗證明)

紅公尺手機dpi計算如下:

math.sqrt(math.pow(1280,2)+

math.pow(720, 2))/4.7 = 312

所以物理尺寸的獲取公式:

math.sqrt(math.pow(寬,2)+

math.pow(高, 2))/dpi = 螢幕物理尺寸

密度(density)

螢幕裡畫素值濃度。

計算：density=dpi/160

紅公尺手機的密度:

320/160 = 2

px 畫素屬於相對單位，螢幕的解析度越高可能 px 看起來就小點！而pc 是絕對單位。相當於我國新四號鉛字的尺寸。

在網頁製作時，基本單位都選擇px而不是pt，因為pt也是通過瀏覽器的dpi轉換成px顯示（比如firefox的dpi是96，則有9pt = 12px）

在css中，度量單位分為兩種：

相對單位：px/em/ex/%

絕對單位：cm/pt/in/pc/mm

這些單位的具體解釋：

px相對長度單位。畫素（pixel）。

畫素是相對於顯示器螢幕解析度而言的。譬如，wondows的使用者所使用的解析度一般是96畫素/英吋。而mac的使用者所使用的解析度一般是72畫素/英吋。

em相對長度單位。相對於當前物件內文字的字型尺寸。

如當前行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

ex相對長度單位。相對於字元「x」的高度。此高度通常為字型尺寸的一半。

如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。

pt絕對長度單位。點（point）。