文|丹頂鶴的日記本

開門見山，直接進入主題。

一. 發明這些單位的原因：

UI設計師和前端工程師，在設計和實現UI界面的時候，顯示效果，會受到不同設備的尺寸和分辨率的影響。
dp，sp，pt這些邏輯單位，便被發明出來，作用就是削弱這種影響。

為了說明白，首先引入3個概念：

px(pixel)像素

像素是電子顯示器上，組成圖像的最小單位。

ppi(pixel per inch 或 pixel/inch) 像素密度

Photoshop文件屬性設置

Photoshop->new

ppi指的是，每英寸所顯示的像素數。

ppi越高，圖像越細膩。

不同設備的ppi的差異，是發明邏輯像素的一個重要原因。

分辨率的單位是 pixel 還是 PPI？這個各大手機官網都不一致，暫且認為兩者都對

這里我查找了一些手機的官網，發現他們對于分辨率的定義也不是很統一。
HTC官網的表達方式：“分辨率高達 401ppi”

HTC官網

小米官網的表達方式：“分辨率為 2560x1440”

小米官網

蘋果官網的表達方式如下：

蘋果中國官網

Apple.Inc

iOS 系統，引入單位pt

pt(point) 點

點是一個邏輯概念，相同點數的圖像，在物理上是一樣大的，但是由不同多的像素點組成。

物理尺寸一樣，屏幕尺寸2倍

iPhone4/5/6/7
1pt = 2px

iPhone6plus/7plus
1pt= 3px

Android 系統，引入單位 dp/dip（device-independent pixel/ density-independent pixel），sp（scale-independent pixel）

dp 又叫 dip ,設備無關像素。 和iOS的point的作用相同。

sp 縮放無關像素。是用來定義字號的邏輯單位。
因為安卓系統允許用戶自定義字大小，在默認情況下，1dp=1sp。

dp/sp是邏輯概念，相同點數的圖像，在物理上是一樣大的，但是由不同多的像素點組成。

ppi = 160 1dp=1px 標清
ppi = 240 1dp = 1.5 px 高清
ppi = 320 1dp = 2px 超高清(>300ppi， 視網膜顯示)
ppi = 480 1dp = 3px

dpi這個搗蛋鬼

dpi 是打印分辨率，前端和UI幾乎用不到這個概念，卻經常被這個概念干擾。

• 干擾1 ：dpi(device-independent pixel) 和 dip(dot per inch) 長得太像。

dip 又叫 dp, 但是 dpi是完全不同的概念。
dpi 用于打印機，指的是打印機在每英寸上打印的點數。dpi越高，圖片越細膩。

• 干擾2：ppi dpi以為是一個

ppi反應的是電子顯示器上顯示圖像的質量
dpi反應的是打印機打印圖片的質量

• 干擾3：ldpi/hdpi/xhdpi/xxhdpi 是用來形容電子屏幕的，但是這里的d(density)和 打印分辨率的 d(dot)是不同的縮寫啊

ldpi（low density per inch）低清
mdpi (middle density per inch )標清
hdpi (high density per inch)高清

dpi （dot per inch）

網絡上，這方面的文章很多，通常是洋洋灑灑很長，卻找不到我最需要的部分。這篇文章，我選擇了我日常工作中使用頻率最高的概念，希望可以減輕讀者的閱讀負擔。