码迷,mamicode.com
首页 > 移动开辟 > 详细

移动设备分辨率(终究弄懂了为甚么移动端设计稿总是640px和750px)

时间:2018-09-06 12:37:16      浏览:9757      评论:0      收藏:0      [点我收藏+]

标签: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 mamicode.com 版权一切 京ICP备13008772号-2
迷上了代码!