移動設備分辨率（終於弄懂了爲何移動端設計稿老是640px和750px）

 

　　在我開始寫移動端頁面至今，一直有2個疑問困擾着我，我只知道結果但不知道爲何

　　問題1：爲何設計師給的設計稿老是640px或750px（如今通常以Phone6爲基準，給的750px）

　　問題2：爲何咱們拿到640px和750px的設計稿，在編碼的時候都要除以2,

　　　　   （好比設計稿上有一個圖標寬高是40*40，咱們須要先除以2，實際編碼時候寬高要寫成20*20）

 

　　以前也在網上搜過一些相關的文章，但無奈大多說的比較晦澀難懂，要嘛就是太過於深奧。也多是我腦子不夠用吧。

　　不過要徹底理解，確實也須要相關不少的知識儲備。我的以爲不必那麼深刻理解，下面這張圖看懂之後，至少上面2個問題就迎刃而解了，基本也就夠了

　　

　　這張圖最關鍵的地方就是理解pt和px是什麼，以及它們之間的關係

 

　　pt：邏輯像素或邏輯分辨率

　 　　 至關於咱們用瀏覽器模擬調試移動端時看到的各手機的像素，以下圖iPhone6看到的寬高375*667，

　　　   這個就是邏輯像素，也能夠看作是一個長度單位

　　　　

 

　　px：物理像素或物理分辨率，又被稱爲設備像素 

　　　　下圖的750*1334就是物理像素，它不能看作是一個長度單位，能夠看作是一個點，即像素點

　　　　

 

 　　結論：pt和px的關係就是—— 1pt 裏面有幾個像素點

　　　　（好比 1pt裏面有1個px，也能夠有2個，3個，分別對應上圖的@1x,@2x,@3x）

　　下圖的Reader就是反應它們之間的比例，即 pt 和 px爲1:2

　　仍是拿iPhone6舉例，下圖 pt 寬高是375*667，px 寬高是750*1334，px的寬高是pt的2倍。

　　因此這裏的Reader關係是@2x,也就是2倍

　　因此爲何設計稿640px和750px要除以2，就是由於設計師給的640px和750px是物理像素

　   而咱們在瀏覽器模擬調試移動端的時候看到的像素是邏輯像素

　　　

 

　　由於本人能力有限，可能說得不太清楚，下面的這篇文章說的還能夠，有興趣的小夥伴能夠看看

　　補充：https://www.genban.org/teach/teach-11650.html   （這篇較爲詳細和清楚的解釋了邏輯像素和物理像素）

 

　　注：差點忘了還有一個問題沒有說（23333）就是你們看到下圖 iPhone6/6sPlus pt和px的比例是1:3

　　可能會有這樣一個疑問，1pt裏面像素點越多確定越清晰，那爲何沒有看到設計師給1242px的設計稿呢？

　　聽一個大神說是由於人用肉眼睛能分辨出的最大分辨率就是@2x即750*1334，而@3x已經超過人肉眼分辨的極限了

　　因此會發現 iPhone6/6sPlus（@3x） 並無比 iPhone6/6s （@2x）更清晰，至關因而同樣的。