移動開發--像素知識

標籤：12px   抽象   列印   math   證明   物理   方向   相對   int   

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

 

例如：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 = 螢幕物理尺寸

Density=dpi/160(px/inch)

 

 

 

 

 

 

 

術語	說明	備忘
物理尺寸(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）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

pc
絕對長度單位。派卡（Pica）。相當於我國新四號鉛字的尺寸。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

in
絕對長度單位。英寸（Inch）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

mm
絕對長度單位。毫米（Millimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc
cm
絕對長度單位。厘米（Centimeter）。
1in = 2.54cm = 25.4 mm = 72pt = 6pc

 

移動開發--像素知識