對(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

個(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í)