UI尺寸知識匯總

對于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ī)格

iPhone尺寸規(guī)格.png

下面將以這張圖為例進行講解。

概念

  • 英寸(inch)
    1 inch = 2.54cm = 25.4mm

  • 屏幕尺寸
    即屏幕的對角線長度。以iPhone 6 為例,屏幕尺寸等于屏幕對角線的長度4.7英寸

    屏幕尺寸.png
  • 像素/像素點(pixel)
    屏幕的最小發(fā)光單位。縮寫為px

  • 設(shè)備分辨率
    屏幕上像素點的數(shù)量。以iPhone 6 為例,設(shè)備分辨率為750*1334,即橫向最多可劃分為750個像素點,縱向最多可劃分為1334個像素點。

設(shè)備分辨率.png
  • 像素密度(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軸像素密度相同,但也有不相同的顯示器。維基百科

像素密度.png

注釋: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×50pixel(logicalimage.size=50×50point)
    在iphone 4~6 中,scale =2 ,用的圖標是100×100pixel(logicalimage.size=50×50point)
    在iphone 6+ 中,scale =3 ,用的圖標是150×150pixel(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。

參考

簡書-星空下的菜地-iPhone屏幕尺寸、分辨率及適配
腳本之家在線工具-UI尺寸規(guī)范
screensiz
SNOW-八一八那些px、pt、ppi、dpi、dp、sp之間的關(guān)系
移動端尺寸基礎(chǔ)知識

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容