行動裝置解析度（終於弄懂了為什麼移動端設計稿總是640px和750px）

標籤：http   lan   瀏覽器   眼睛   編碼   www   font   物理   5*   

 

　　在我開始寫移動端頁面至今，一直有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 裡面有幾個 像素點，的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）更清晰，相當於是一樣的。

　　

 

行動裝置解析度（終於弄懂了為什麼移動端設計稿總是640px和750px）