前言:
- pt在iOS, CSS, Android上都有，但意義卻不盡相同。
- px在iOS, CSS, Android上也都有，意義也相同。
- 但若只用px打天下，則會發生在不同大小手機螢幕上會有不同的結果。
在 UI 設計中，我們可以理解成「顯示器呈現影像細節的能力」。也就是說，成像單位越細小、越密集的螢幕，解析度就越高。 大多數螢幕的成像單位是像素(Pixel)，因此描述密度/解析度的方法就是抓一段固定長度（通常是英吋），看看裡面塞進了幾顆像素點，固定長度能塞越多顆，就代表這個螢幕的點越細。
假設，蘋果出了螢幕長寬都只有一英吋，畫面大小是 10x10 pixel，名稱叫做「iPhone Inch」：
如果要描述此螢幕有多精細，可以說成：
- 螢幕的像素密度是每英吋 10 pixel」
- 「iPhone Inch 的解析度是 10 ppi」(Pixels Per Inch，每英吋塞進了幾顆像素點（像素密度）)
假設，蘋果又出了螢幕長寬都只有一英吋，畫面大小是 20x20 pixel，名稱叫做「iPhone Inchs」：
如果要描述此螢幕有多精細，可以說成：
- 螢幕的像素密度是每英吋 20 pixel」
- 「iPhone Inchs 的解析度是 20 ppi」
再舉一個例子，iPhone 7的螢幕寬度是 2.3 吋，橫向總共排列了 750 顆 pixel
- 每英吋塞進了 750/2.3 ≈ 326 顆 pixel
- iPhone 7 的解析度是 326 ppi
所以就可以整理出一個式子：
如果在 iPhone Inch 與 iPhone Inchs 上各畫上一條 1 px 黑線，則如下圖：
此兩種解析度的螢幕發生不同粗細的線條。
當一個螢幕解析度（像素密度）越高的時候，像素點就會越密集、越小顆，因此我們使用 px 當單位來做 UI 的話，就會發生不同解析度的螢幕呈現不同的狀況。
如何解決呢？就有了 pt 的概念產生了：
以銀色機子的「1 顆 px」為基準，這顆紅點的大小，就當成新的標準尺寸單位，你就叫它「1 pt (point, 點)」，這個點點不管搬到哪裡就是那麼大，我現在把它搬到金色的機子上，也是維持同樣大小。
- 銀色機器上的 1 px 等於 1 pt。
- 金色機器上的 2 px 等於 1 pt。
pt (point) 的誕生，就是為了解決不同的螢幕上，px 大小會變來變去的問題
所以，在初代iPhone上標出一顆紅色的 pixel，然後說它的長度（或寬度）叫做「1 pt」。
- 在視網膜螢幕、密度兩倍的 iPhone 4 上，它的長度就會涵蓋了螢幕上的 2px。
- 在三倍的iPhone 6 plus 上，它的長度就會涵蓋了螢幕上的 3px。
Android手機的螢幕解析度非常多種，所以Google就制定了一套規定來規範螢幕解析度：
例如：
- 螢幕解析度約160DPI，就稱之為MDPI。
- 螢幕解析度約320DPI，就稱之為XHDPI。
註：Android 用的單位叫 dpi，但為了溝通方便，我們都還是用 ppi
把 MDPI 的螢幕定為基準點，它是一倍像素密度（上頭寫的 1x），我們在這顆螢幕上挑一顆 pixel，把它弄成紅色，接著把這個小紅點移到 XHDPI 的 2x 螢幕上的時候，它就會變成涵蓋 2px 了。
此單位名稱為 dp (Density-Independent Pixels) 等效於 iOS 的 pt
CSS 的 pt 單位和我們前面所提的 iOS pt 其實是沒有關係的，其運作方式也不相同，所以無法一起使用。
pt 這個單位詞，其實最早源自於傳統的鉛字印刷，是用來表示鉛字塊的尺寸，在印刷和平面設計的世界裡，1 pt = 1/72 英吋；而 CSS 之所以有 pt 這個單位，其實是要把網頁印刷/列印出來的時候用到的。
Reference