相信iOSer們都被iOS開(kāi)發(fā)中像素和點(diǎn)這兩個(gè)概念困擾過(guò),經(jīng)過(guò)一段時(shí)間的學(xué)習(xí)和總結(jié),再次為大家講講我的個(gè)人理解,希望對(duì)和我有同樣困惑的同學(xué)一些幫助...
首先，點(diǎn)（point）是Apple制定的一個(gè)獨(dú)立于物理設(shè)備的邏輯坐標(biāo)單位。像素（pixel）是組成圖象的最基本單元。這兩個(gè)概念是不完全等同的。在iphone4之前的設(shè)備中，一個(gè)點(diǎn)等同于一個(gè)像素的大小。
像素的理解：
一個(gè)像素有多大呢？主要取決于顯示器的分辨率，相同面積不同分辨率的顯示屏，其像素點(diǎn)大小就不相同。
OK，這又引入了一個(gè)叫做“分辨率”的名詞。
分辨率：每一個(gè)長(zhǎng)度方向上的像素個(gè)數(shù) 乘以 每一個(gè)寬度方向上的像素個(gè)數(shù)的形式。
拿iPhone 6 Plus為例：
iphone 6 Plus 的分辨率為 1242 x 2208 （實(shí)際：1080 × 1920）（pixels），屏幕大小為5.5英寸（5.5英寸為對(duì)角線長(zhǎng)度，屏幕比例為16 ：9）
根據(jù)勾股定理就可以算出來(lái)屏幕寬和高對(duì)應(yīng)的英寸長(zhǎng)度。
點(diǎn)的理解：
點(diǎn)，是一個(gè)虛擬的單位，并非實(shí)際存在的。
蘋(píng)果從iphone4開(kāi)始在在設(shè)備上使用宣稱(chēng)的“Retina”屏幕，Retina在英文中，是視網(wǎng)膜的意思。
在Retina屏幕中，一個(gè)點(diǎn)（point）占據(jù)2個(gè)像素的寬度。
而在之后的 iphone 6 Plus 和 iphone 7 Plus 中更推出超高像素密度的“Retina”屏幕，像素密度（PPI）達(dá)到 401。
像素密度（PPI）： 英文全稱(chēng)：pixels per inch，即：像素/英寸，也叫像素密度，它是描述在水平的和垂直的方向上，每英寸距離的圖像包含的像素（pixel）數(shù)目。因此PPI數(shù)值越高，即代表顯示屏能夠以越高的密度顯示圖像。當(dāng)然，顯示的密度越高，擬真度就越高。
所以在超高像素密度的 iphone 6 Plus 和 iphone 7 Plus 上，一個(gè)點(diǎn)（point）占據(jù)3個(gè)像素的寬度（注意：此處僅僅代表單方向的寬度）。
介紹完點(diǎn)和像素的區(qū)別，下面就分別講一下在開(kāi)發(fā)中的用法：
UI：
我們親愛(ài)的的美工妹子，在為iOS設(shè)備設(shè)計(jì)時(shí)都是用像素（pixels）衡量的。
從@2x 到 @3x，素材的分辨率提高了1.5倍，例如：@2x的素材為44 x 44 （pixels），那么相應(yīng)的@3x素材大小為66 x 66 （pixels）。
@2x 和 @3x 的由來(lái)：
初代iPhone屏幕尺寸為3.5英寸，PPI為163。
從Retina屏幕開(kāi)始，PPI提升到326。
直至Plus系列的PPI為 401。
先再計(jì)算一下iPhone 6 Plus 的像素和點(diǎn)：
屏幕點(diǎn)坐標(biāo)系設(shè)計(jì)的寬度為 414 x 736 (points)，理論對(duì)應(yīng)像素應(yīng)該是：1242 x 2208（pixels）。
但是，iPhone 6 Plus 的物理像素為：1080 x 1920（pixels），對(duì)應(yīng)5.5英寸的屏幕，所以像素密度就計(jì)算出來(lái)就是401。
在iPhone 4 -- iPhone 7產(chǎn)品中，除了iphone 6 Plus 和 7 Plus，其他所有iPhone的PPI是一致的，都是326，用@2x的素材。
但是iphone 6 Plus 和 7 Plus的實(shí)際DPI是401，理論上蘋(píng)果應(yīng)該用401 / 326 * @2x=@2.46x的素材。但是這個(gè)奇葩的比例對(duì)UI來(lái)說(shuō)很難切圖。
所以，蘋(píng)果為方便開(kāi)發(fā)者，用的是@3x的素材，然后再縮放到@2.46x上，實(shí)際上是縮放到2.46/3=82%。
而實(shí)際上分辨率為1080 x 1920（pixels），1920/2208≈0.87，1080/1242≈0.87， 所以這樣算下來(lái)，物理分辨率和虛擬分比率的比例是87%。
這樣可以是開(kāi)發(fā)者更方便，比如準(zhǔn)備素材時(shí)，字號(hào)可以直接調(diào)成@3x的。
當(dāng)我們需要使用某張圖片時(shí)，只需要在xcode的Assets.xcassets中添加上它的@2x 和 @3x的樣張，系統(tǒng)會(huì)根據(jù)當(dāng)前機(jī)型自動(dòng)選擇合適的圖片展示。
看完下面這張圖，你也許能完全理解上面所說(shuō)的概念了：
比例因子 scale ：scale屬性反映了從邏輯坐標(biāo)到設(shè)備屏幕坐標(biāo)的轉(zhuǎn)換，在非視網(wǎng)膜屏幕上，比例因子值為1.0，即邏輯坐標(biāo)系中的一個(gè)點(diǎn)等于設(shè)備中一個(gè)像素(1×1)；在視網(wǎng)膜屏幕中,比例因子值為2.0,即邏輯坐標(biāo)系中的一個(gè)點(diǎn)等于設(shè)備中四個(gè)像素(2×2)；同理，在6plus這種scale為3.0的設(shè)備上，1point等于9pixels。
控件的尺寸匹配：
說(shuō)道這，應(yīng)該對(duì)像素和點(diǎn)有個(gè)大概的了解了。在開(kāi)發(fā)中可能還會(huì)遇到一些困惑：
假設(shè)一個(gè)控件在iPhone 6上的寬度為125（points），對(duì)比屏幕寬度375（points），125/375 ≈ 33% ，剛好占據(jù)屏幕寬度的三分之一。
同一控件展示在6Plus系列上時(shí)，125/414 ≈ 30% ，還不到屏幕寬度的三分之一，會(huì)顯得稍微短一些。
所以，我們?cè)谠O(shè)計(jì)控件寬度的時(shí)候，盡量少使用類(lèi)似125（points）這樣的死數(shù)據(jù)。
如果實(shí)在有必要使用的話(huà)，有一種解決辦法就是：
假設(shè)：你的基準(zhǔn)機(jī)型是iphone 6的話(huà)，可以自己得出一個(gè)比例因子，在通過(guò)比例因子去自動(dòng)適配其他機(jī)型。
可以在項(xiàng)目中引入這樣一個(gè)宏：
#define BASE 375
#define SCALEWITH_2X(WID) \
[UIScreen mainScreen].bounds.size.width / BASE * WID
最后再多說(shuō)一句，“文”有AutoLayout，“武”有Masonry，基本上可以滿(mǎn)足絕大多數(shù)布局要求了吧~
以上就是關(guān)于像素和點(diǎn)的一些基本知識(shí)了，若有偏否，歡迎指正！
