本文的標題是個問句，但是在iOS實際開發中程序員即使不知道這個問題答案也能開發，因為設計師會切出@1x，@2x，@3x這幾種圖片，開發者只需要放到對應位置即可。本文從問句出發，從基礎概念和蘋果的策略等方面進行解讀，探究原理，體會優美。

基礎概念

在進入優美設計之前，我們應該了解一些基礎概念

像素

像素通俗來理解就是，組成圖像的最小單位。把一張圖片放大，就會發現很多小塊，這些就是像素，需要注意的事像素雖然是組成圖像的最小單位，但是像素的大小不是固定的，不同的顯示設備上的像素大小可能不同。

分辨率

關于分辨率，主要會說到兩種分辨率，一種是屏幕分辨率，另外一種是圖像分辨率

• 屏幕分辨率：
  就用目前我用的顯示器來舉例，

  
  
  
  

  可以看到屏幕分辨率為3840 x 2160，那么它代表屏幕在水平方向有3840個像素點，垂直方向有2160個像素點。
  那么調整屏幕分辨率又是什么意思呢?

  
  
  
  通過上圖可以看到，從左到右分辨率在不斷增大，對于屏幕來說，分辨率越大，像素點越多，但是尺寸不變，從而像素點的大小就會變?。ㄟ@也是剛剛提到的像素大小不是固定的）。這里還有一個有意思的地方，如果分辨率越大，圖像就會相對變小，那么我們試著從原理上來解讀下：分辨率變大，像素點變小，圖像變小，說明圖像的單位是像素。這里看上去是順理成章的推理，其實是為后文講述適配策略做鋪墊。

• 圖片分辨率
  查看圖片的屬性的時候，我們會發現有屬性是分辨率大小，就拿前文中的圖片來說
  

  
  可以看到image size是759 x 496 pixels，它代表這張圖片顯示在屏幕上，需要占據水平方向759個像素點，垂直方向的496個像素點。我們可以手動改變圖片的像素，它就會進行大小視覺變化，原理上是因為占據的像素點變多了。如果只是對圖片進行放大和縮小動畫呢，放大到一定程度的時候竟然能看到像素塊，這應該如何解釋？這種操作其實是通過像素補充算法進行的，和我們之前所講述的原理不沖突。此外還補充一點，有研究稱超過300ppi（pixel per inch，即每英寸的像素點）的時候，人眼無法識別像素點。這就是為什么只能放大到一定程度我們才能看到像素點。

蘋果的設備歷史

現在即將進入最精彩的設計部分，但是我們得循序漸進，先來看看蘋果設備變更歷史

iphone橫空出世

第一代產品是初代的iphone，它的屏幕分辨率是320 x 480

iphone 3 & iphone 3Gs

與初代分辨率保持不變，依然是320 x 480

iphone 4 & iphone 4s

在這個階段蘋果推出了Retina屏幕（視網膜屏幕），將屏幕分辨率大大提高，變為了原來的兩倍，也就是640 x 960，但是物理尺寸是沒有變的。然后，問題也相繼而來

• 分辨率不同

  • 問題
    如果原來的APP運行在新的機型上面，將無法正常顯示，因為之前的設計方式是按照像素來進行約束的，例如一個控件的frame是CGRectMake(20, 20, 100, 100)，就是說位于坐標軸x = 20，y = 20的位置，自身大小為100 x 100（單位是像素），那么在新的機型上面位置和大小均會減半，原因是因為屏幕大小沒變，分辨率提高，導致像素大小變小，所以原本的x = 20所在的位置在物理上來說只有之前的一半，其他y，大小同理。

  • 解決方案
    這只是第一次機型屏幕尺寸改變，之后肯定還會推出更多不同尺寸的機型，長遠考慮，蘋果設計出了一勞永逸的方法，就是為開發者引入了一個新的概念——Point，從此以后，iOS設備上的長度單位從像素變成了點，來看看點的定義：

    • 在初代iphone & iphone 3 & iphone 3Gs中：1 point = 1 pixel
    • 而在iphone 4 & iphone 4s中：1 point = 2 pixel

    那么我們可以認為以上兩種的屏幕均為320 x 480（單位為Point）

• 圖片如何處理
  • 問題
    分辨率的問題通過Point概念引入得以解決，由于新舊機型使用point作為統一單位，也就是說在舊的機型上面本來的元素，在新的機型上面將會拉伸，這里的拉伸理解為分辨率翻倍，才能保證物理視覺上大小是一樣的。那么對于顏色和文字等這些矢量元素來說，拉伸是不影響的。但是對于圖片這種非矢量元素，如果拉伸，可能會導致在新的機型上看起來比較模糊。
  • 解決方案
    蘋果要求開發者對圖片進行適配，具體的方案就是每張圖片都要求有同一內容的不同分辨率版本，例如一張圖片的大小為20 x 20（單位為point），需要傳入一張20 x 20（單位為pixel），和一張40 x 40（單位為pixel）。并且蘋果規定使用規范的名字來區分它們，舊設備需要的圖片名字不變，新設備需要的圖片在名字后面加上@2x，代表著在該設備上1 point = 2 pixel。這樣一來，APP執行的時候，如果是新的機型，首先會使用帶有@2x的圖片，如果沒有，才會使用不帶@2x的圖片。所以，如果開發者按照規定傳入規范的圖片，那么APP就能在不同設備上都具有良好的顯示。

iphone 5 & iphone 5s

2012年，蘋果發布了iphone 5，iphone 5的物理尺寸變成了320 x 568，回顧之前的物理尺寸，是320 x 480，在改變上來說只是變長了88。之前的APP依然是可以在iphone 5上運行，只不過上下將會分別留出44的黑色區域。蘋果規定，如果APP設置了iphone 5的啟動圖片，那么就代表適配了iphone 5，這時候上下部分不變，將中間部分拉伸，黑色部分就沒有了。

iphone 6 & iphone 6s

2014年，蘋果又推出了iphoen 6，物理尺寸變成了375 x 667

iphone 6p

在iphone 6誕生之后不久，蘋果推出了第一款plus級別的iphone 6plus，其屏幕物理尺寸為414 x 736，由于分辨率提高很多，所以蘋果在對圖片的適配方面加上了@3x的規定，用于在iphone 6plus上顯示的圖片。到了這個時候，屏幕物理尺寸已經有很多種了

• 問題
  那么如果使用之前的絕對布局，就是直接寫死控件的位置，x、y為多少直接定好，這種方式的布局可能會導致在不同物理尺寸的屏幕上顯示效果不盡相同。
• 解決方案
  蘋果早在iOS 6的時候就推出了一款新的技術，那就是AutoLayout。這是一種全新的布局模式，和原來直接設定控件位置不同，這種布局指定控件之間的相對位置，約束他們之間的關系。這種布局模式可以很好適應不同尺寸的屏幕。關于該技術的使用這里不做詳細說明，有興趣的可以查閱學習。

iphone 7 & iphone 7plus

2016年，iphone 7 和 iphone 7plus推出，其屏幕的物理尺寸和iphone 6 以及 iphone 6plus差不多

iphone 8 & iphone 8plus

2017年，iphone 8 和iphone 8plus推出，物理尺寸依然變化不大

iphone X

iphone X是蘋果劃時代的產品，開啟了全面屏的時代，他的物理尺寸為375 x 812，由于分辨率很高，對于iphone X，也應該使用@3x規格的圖片。除此之外，由于iphone X的特別，所以我們還在其他地方進行適配。之前的屏幕都是直角，而iphone X則是圓角，再加上頂部攝像頭所在的“劉海”位置，以及底部取代了home鍵的白色橫條，所以安全域不在是滿屏，而是上下各自切掉一部分。上下所切掉的部分分別為44和33，那么我們重新計算下安全域的高度，812 - 44 - 33 = 735。實際上相比iphone 6/6s/7/8，寬度相同，只是高度上高了67。相比當年iphone 5 到iphone 6的過渡，iphone X對設計師來說，影響不是很大。