CSS像素(css pixel)及像素單位 例如px pt em

小序

最近在作pc端、微信端、移動端app,公司的每一個項目分別都有這三者，在pc端調試頁面，像素顯示都和預期效果的同樣，但是，微信頁面和手機頁面卻天差地別，在goole裏調試得好好的，結果，真機看效果，用同事們的手機有不一樣的顯示效果，因而，對於像素單位有了興趣，近來，根據本身查到的資料，作一個總結。

像素(pixel)概念

通常而言，pixel（像素）是圖像的基本採樣單位。詳細解釋見維基像素條目。因此它不是一個肯定的物理量，也不是一個具體的點或者小方塊（儘管能夠用點和小方塊來呈現），而是一個抽象概念。

CSS像素(css pixel)

CSS像素是Web編程的概念，指的是CSS樣式代碼中使用的邏輯像素。
在CSS規範中，長度單位能夠分爲兩類，絕對(absolute)單位以及相對(relative)單位。

按照CSS規範的定義，CSS中的px是一個相對長度，它相對的，是viewing device的分辨率。

設備像素(device pixel):

設備像素設是物理概念，指的是設備中使用的物理像素。
不一樣的設備，其圖像基本單位是不一樣的，好比顯示器的點距，能夠認爲是顯示器的物理像素。如今的液晶顯示器的點距通常在0.25mm到0.29mm之間。而打印機的墨點，也能夠認爲是打印機的物理像素，300DPI就是0.085mm，600DPI就是0.042mm。

咱們一般所說的顯示器分辨率，實際上是指桌面設定的分辨率，而不是顯示器的物理分辨率。只不過如今液晶顯示器成爲主流，因爲液晶的顯示原理與CRT不一樣，只有在桌面分辨率與物理分辨率一致的狀況下，顯示效果最佳，因此如今咱們的桌面分辨率幾乎老是與顯示器的物理分辨率一致了。

設備像素與CSS像素之間的換算

通常來講，px就是對應設備的物理像素，然而若是輸出設備的解析度與電腦顯示器大不相同，輸出效果就會有問題。例如打印機輸出到紙張上，其解析度比電腦屏幕要高許多，若是不縮放，直接使用設備的物理像素，那電腦上的照片由600DPI的打印機打出來就比用顯示器看小了約6倍。

因此，CSS規定，在這種狀況下，瀏覽器應該對像素值進行縮放調節，以保持閱讀體驗的大致一致。也就是要保持必定像素的長度在不一樣設備輸出上看上去的大小老是差很少。直接按照設備物理像素的大小進行換算固然是一個方式，可是CSS考慮得更多，它建議，轉換應按照「參考像素」（reference pixel）來進行。

眼睛看到的大小，取決於可視角度。而可視角度取決於物體的實際大小以及物體與眼睛的距離。10米遠處一個1米見方的東西，與1米遠處的10釐米見方的東西，看上去的大小差很少是同樣的，所謂一葉障目不見泰山，講的就是這個常識。

所以CSS規範使用視角來定義「參考像素」，1 參考像素即爲從一臂之遙看解析度爲96DPI的設備輸出（即1英寸96點）時，1點（即1/96英寸）的視角。

請注意這個差異——CSS規範定義的參考像素並非1/96英寸，而是1/96英寸在一臂之遙的看起來的視角。一般認爲常人臂長爲28英寸，因此其視角能夠計算出來是0.0213度。（即(1/96)in / (28in 2 PI / 360deg) ）

咱們在使用不一樣設備輸出時，眼睛與設備輸出的典型距離是不一樣的。好比iPhone 5使用的是Retina視網膜屏幕，使用2px x 2px的 device pixel 表明 1px x 1px 的 css pixel，因此設備像素數爲640 x 1136px，而CSS邏輯像素數爲320 x 568px。

像素單位

這裏只分別列出一個經常使用的：

絕對(absolute)單位

px

px單位名稱爲像素，像素（px）是相對於顯示器屏幕分辨率而言的，而這種像素長度和你在顯示器上看到的文字屏幕像素無關。
並且在特定設備上老是一個近似值（原則是儘可能接近參考像素）。
px其實是一個按角度度量的單位。

相對(relative)單位

em

1em指的是一個字體的大小，它會繼承父級元素的字體大小，所以並非一個固定的值,起初排版度量時是基於當前字體大寫字母」M」的尺寸的。

不只僅是字體，將行距(line-height)，和縱向高度的單位都用em。保證縮放時候的總體性。

em指字體高，任意瀏覽器的默認字體高都是16px。因此,未經調整的瀏覽器都符合:1em=16px。那麼12px=0.75em,10px=0.625em。

em有以下特色:
1.em的值並非固定的;
2.em會繼承父級元素的字體大小。

em巧用：
中文文章中，通常段首空兩格。若是用px做爲單位，對12px字體來講須要空出24px，對14px字體來講須要空出28px……這樣換算很是不通用。若是用上em單位，這個問題就很好解決了，1個字的大小就是1em，那兩個字的大小就是2em。所以，只需這樣定義就好了：

p { text-indent: 2em; }

參考資料：

前端工程師須要明白的「像素」 文／阿樹（簡書做者）
像素（px）究竟是個什麼單位
CSS的長度單位