碼迷,www.tparu.icu
吉利平特名人堂 > 移動開發 > 詳細

平特一中一码多少倍:移動設備分辨率(終于弄懂了為什么移動端設計稿總是640px和750px)

時間:2018-09-06 12:37:16      閱讀:7202      評論:0      收藏:0      [點我收藏+]

吉利平特名人堂 www.tparu.icu 標簽: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)

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

原文地址:https://www.cnblogs.com/tu-0718/p/9596894.html

(0)
(8)
   
舉報
評論 一句話評論(0
登錄后才能評論!
? 2014 吉利平特名人堂 版權所有 京ICP備13008772號-2
迷上了代碼!
极速时时基本走势图 重庆时时计划免费 六肖王中王免费期期准94期 pk10赛车历史开奖记录 北京pk10计划 北京pk10官网开奖 pk10北京pk拾大小计划 老重庆时时开奖结果查询 网络捕鱼怎么控制玩家 万人炸金花最新版2016 bet007足球即时比分球探网 被重庆时时彩骗了 时时彩万位6码100%500元倍投方案 mg游戏平台官网网址 电子官网游戏 麻将游戏旧版本