UI尺寸知識(shí)匯總

對(duì)于UI尺寸這方面的知識(shí)一直模模糊糊的,對(duì)分辨率、ppi、dpi、pt、px 等傻傻分不清楚,今日特此總結(jié)。

單位

  • px
    pixel 像素,屏幕上的最小發(fā)光單位。

  • pt
    point 一個(gè)標(biāo)準(zhǔn)的長度單位,1pt=1/72 inch。在ios中以普通屏為基準(zhǔn),1pt = 1px。

  • dp
    device independent pixels 設(shè)備獨(dú)立像素,android專用長度單位,以160ppi屏幕為標(biāo)準(zhǔn),則1dp=1px,即
    1dp = PPI/160*1px (大寫單詞表示變量,小寫單詞表示單位)

  • sp
    scaled pixels 放大像素,android專用字體單位,以160ppi屏幕為標(biāo)準(zhǔn),字體大小為100%時(shí),則1sp = 1px。

  • dpi
    dot per inch 每英寸有多少個(gè)點(diǎn)。
    dpi最初用于衡量打印物上每英寸的點(diǎn)數(shù)密度。dpi值越高圖片越精細(xì)。當(dāng)dpi的概念應(yīng)用在計(jì)算機(jī)屏幕上時(shí),就稱之為ppi。
    同理,ppi就是計(jì)算機(jī)屏幕上每英寸可以顯示的像素點(diǎn)的數(shù)量。因此在電子屏幕中dpi = ppi 。

iPhone尺寸規(guī)格

iPhone尺寸規(guī)格.png

下面將以這張圖為例進(jìn)行講解。

概念

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

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

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

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

設(shè)備分辨率.png
  • 像素密度(PPI)

    • 版本一
      Pixel Per Inch by diagonal : 沿著對(duì)角線,每英寸所擁有的像素點(diǎn)數(shù)
      量。
      以iphone 6 為例,ppi是326,根據(jù)勾股定理,由以下公式計(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是屏幕物理高度

個(gè)人思考

實(shí)際版本二才是正確的定義和計(jì)算方法,那為什么會(huì)出現(xiàn)版本一呢?
已知條件是屏幕分辨率屏幕尺寸,版本二中的公式需要寬度和高度,而已知的屏幕尺寸是屏幕對(duì)角線的長度,所以推導(dǎo)出以下公式,繼而推導(dǎo)出版本一中的計(jì)算方式。
(X/x)2=(Y/y)2 = (X2+Y2)/(x2+y2)= (X2+Y2)/(c2)
c代表屏幕尺寸,即對(duì)角線長度。

實(shí)際上在正方形中

  • 縮放因子(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倍(一個(gè)Point被渲染成一個(gè)2×2的像素矩陣)。
      1 point = SCALE × 1 pixel (在iPhone 4~6中,縮放因子scale=2;在iphone 6+ 中,縮放因子scale = 3)
  • 邏輯分辨率
    邏輯分辨率的基本單位是point,設(shè)備分辨率的基本單位是pixel。
    不同的屏幕具有不同的縮放因子,邏輯分辨率 = 設(shè)備分辨率 / 縮放因子

  • @2x/@3x 高倍圖
    由于縮放因子的存在,在制作圖標(biāo)時(shí),針對(duì)不同分辨率的屏幕要提供不同倍率的圖標(biāo)。
    在iphone 3GS中,scale =1 ,用的圖標(biāo)是50×50pixel(logicalimage.size=50×50point)
    在iphone 4~6 中,scale =2 ,用的圖標(biāo)是100×100pixel(logicalimage.size=50×50point)
    在iphone 6+ 中,scale =3 ,用的圖標(biāo)是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,但是對(duì)于開發(fā)者很不方便,所以取為@3x,而最后iphone會(huì)自動(dòng)縮放到@2.46。

參考

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

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

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