移動裝置解析度(終於弄懂了為什麼移動端設計稿總是640px和750px)
原文出處:https://www.cnblogs.com/tu-0718/p/9596894.html
在我開始寫移動端頁面至今,一直有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)更清晰,相當於是一樣的。