對于UI尺寸這方面的知識一直模模糊糊的,對分辨率、ppi、dpi、pt、px 等傻傻分不清楚,今日特此總結(jié)。
單位
px
pixel 像素,屏幕上的最小發(fā)光單位。pt
point 一個標準的長度單位,1pt=1/72 inch。在ios中以普通屏為基準,1pt = 1px。dp
device independent pixels 設(shè)備獨立像素,android專用長度單位,以160ppi屏幕為標準,則1dp=1px,即
1dp = PPI/160*1px
(大寫單詞表示變量,小寫單詞表示單位)sp
scaled pixels 放大像素,android專用字體單位,以160ppi屏幕為標準,字體大小為100%時,則1sp = 1px。dpi
dot per inch 每英寸有多少個點。
dpi最初用于衡量打印物上每英寸的點數(shù)密度。dpi值越高圖片越精細。當dpi的概念應(yīng)用在計算機屏幕上時,就稱之為ppi。
同理,ppi就是計算機屏幕上每英寸可以顯示的像素點的數(shù)量。因此在電子屏幕中dpi = ppi 。
iPhone尺寸規(guī)格
下面將以這張圖為例進行講解。
概念
英寸(inch)
1 inch = 2.54cm = 25.4mm-
屏幕尺寸
即屏幕的對角線長度。以iPhone 6 為例,屏幕尺寸等于屏幕對角線的長度4.7
英寸屏幕尺寸.png 像素/像素點(pixel)
屏幕的最小發(fā)光單位。縮寫為px設(shè)備分辨率
屏幕上像素點的數(shù)量。以iPhone 6 為例,設(shè)備分辨率為750*1334,即橫向最多可劃分為750個像素點,縱向最多可劃分為1334個像素點。
-
像素密度(PPI)
- 版本一
Pixel Per Inch by diagonal : 沿著對角線,每英寸所擁有的像素點數(shù)
量。
以iphone 6 為例,ppi是326,根據(jù)勾股定理,由以下公式計算可得結(jié)果為325.6122832234
,和結(jié)果有些誤差。
Paste_Image.png- 版本二
ppi 或 PPI (Pixels Per Inch),像素密度(pixel density)單位,即每英寸的長度中所具有的像素。由分辨率中X或Y軸的數(shù)字除以該軸的長度(英寸),可得該軸的像素每英寸密度。一般的像素是方形或接近方形,X與Y軸像素密度相同,但也有不相同的顯示器。維基百科
- 版本一
注釋:X是水平像素分辨率,x是屏幕物理寬度;
Y是豎直像素分辨率,y是屏幕物理高度
個人思考
實際版本二
才是正確的定義和計算方法,那為什么會出現(xiàn)版本一
呢?
已知條件是屏幕分辨率
和屏幕尺寸
,版本二中的公式需要寬度和高度,而已知的屏幕尺寸
是屏幕對角線的長度,所以推導(dǎo)出以下公式,繼而推導(dǎo)出版本一中的計算方式。
(X/x)2=(Y/y)2 = (X2+Y2)/(x2+y2)= (X2+Y2)/(c2)
c代表屏幕尺寸,即對角線長度。
實際上在正方形中
-
縮放因子(scale)
- 起源
早期的iPhone 3GS的屏幕分辨率是320*480,IOS繪制圖形以point為單位,
1 point = 1 pixel
后來在iphone中,同樣大小(3.5inch)的屏幕采用了Retina顯示屏,橫,縱向的像素密度被放大到兩倍,
設(shè)備分辨率提高到(320×2)×(480×2)=640×960
,顯像分辨率提升至iPhone 3GS的4倍(一個Point被渲染成一個2×2的像素矩陣)。
1 point = SCALE × 1 pixel
(在iPhone 4~6中,縮放因子scale=2;在iphone 6+ 中,縮放因子scale = 3)
- 起源
邏輯分辨率
邏輯分辨率的基本單位是point,設(shè)備分辨率的基本單位是pixel。
不同的屏幕具有不同的縮放因子,邏輯分辨率 = 設(shè)備分辨率 / 縮放因子
-
@2x/@3x 高倍圖
由于縮放因子的存在,在制作圖標時,針對不同分辨率的屏幕要提供不同倍率的圖標。
在iphone 3GS中,scale =1 ,用的圖標是50×50
pixel(logicalimage.size=50×50point)
在iphone 4~6 中,scale =2 ,用的圖標是100×100
pixel(logicalimage.size=50×50point)
在iphone 6+ 中,scale =3 ,用的圖標是150×150
pixel(logicalimage.size=50×50point)- 關(guān)于6+的設(shè)備分辨率
為什么要寫成(1242×2208->)1080×1920。
我們可以觀察到,scale和PPI是正相關(guān)的,而401/326*2 ≈ 2.46 ,即在iphone 6plus上,縮放因子應(yīng)該是
@2.46,但是對于開發(fā)者很不方便,所以取為@3x,而最后iphone會自動縮放到@2.46。
- 關(guān)于6+的設(shè)備分辨率
參考
簡書-星空下的菜地-iPhone屏幕尺寸、分辨率及適配
腳本之家在線工具-UI尺寸規(guī)范
screensiz
SNOW-八一八那些px、pt、ppi、dpi、dp、sp之間的關(guān)系
移動端尺寸基礎(chǔ)知識