html640设计稿,移动设备分辨率（终于弄懂了为什么移动端设计稿总是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 里面有几个像素点，下图的Reader就是反应它们之间的比例，即 pt 和 px为1:2

还是拿iPhone6举例，下图 pt 宽高是375*667，px 宽高是750*1334，px的宽高是pt的2倍，[email protected],也就是2倍

所以为什么设计稿640px和750px要除以2，就是因为设计师给的640px和750px是物理像素

而我们在浏览器模拟调试移动端的时候看到的像素是逻辑像素

因为本人能力有限，可能说得不太清楚，下面的这篇文章说的还可以，有兴趣的小伙伴可以看看

注：差点忘了还有一个问题没有说(23333)就是大家看到下图iPhone6/6sPlus pt和px的比例是1:3

可能会有这样一个疑问，1pt里面像素点越多肯定越清晰，那为什么没有看到设计师给1242px的设计稿呢？

听一个大神说是因为人用肉眼睛能分辨出的最大分辨率就是

所以会发现iPhone6/6sPlus(@3x) 并没有比iPhone6/6s (@2x)更清晰，相当于是一样的。

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

html640设计稿,移动设备分辨率（终于弄懂了为什么移动端设计稿总是640px和750px）...相关推荐

计算机考研英语一和英语二的区别,考研英语一和英语二的区别今天终于弄懂了！...
原标题:考研英语一和英语二的区别今天终于弄懂了! 大家在最后三个月冲刺需要注意: 1.建议留几套真题,做考前模拟,精读真题可以用 <考研圣经>(英语二用)98-07 年的真题,都是逐词逐 ...
淘宝特价版拉新赚钱的页面怎么做？我终于弄懂了
淘宝的同胞兄弟特价版,虽然长的朴实无华以至于经常被人问起淘宝特价版靠谱吗?2021年淘宝特价版可谓大火了一把,阿里巴巴不计成本的大力推广淘宝特价版,目的也非常明确要把拼多多占领的市场掠夺回来.最近还传 ...
一文彻底弄懂大端与小端
一文彻底弄懂大端与小端 1. 端模式起源端模式(Endian)起源于<格列佛游记>, 书中根据鸡蛋敲开的方式不同将所有人分为2类,从圆头开始敲的人被归为Big Endian,从尖头开始敲 ...
快速傅里叶变换（研二的我终于弄懂了）
研二的我仍然对快速傅里叶变换一知半解,于是乎,本着待在家里,能耗时间就多耗点,不知道何年马月我才可以在外面快乐的奔跑~~ 快速傅里叶变换的实现(c++版本) 在做项目的时候,需要用到matlab里的f ...
（转）关于数据库主键和外键（终于弄懂啦）
一.什么是主键.外键: 关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录,该属性组就可以成为一个主键比如学生表(学号,姓名,性别,班级) 其中每个学 ...
这一次，终于弄懂了协变和逆变
一.前言刘大胖决定向他的师傅灯笼法师请教什么是协变和逆变. 刘大胖:师傅,最近我在学习泛型接口的时候看到了协变和逆变,翻了很多资料,可还是不能完全弄懂. 灯笼法师:阿胖,你不要被这些概念弄混,编译器 ...
终于弄懂KMP算法了
1.简例弄懂KMP-点此链接查看看了上面的文章,你肯定大概明白了KMP的运作原理,但是你可能对于文章提到的"部分匹配值"的又来还存在疑惑,那么请继续往下看: 我们先抛出两个问题, ...
iPhoneX设计稿适配Android,三分钟弄懂iPhoneX设计尺寸和适配（二）
怎么避免"刘海"尴尬? 很简单,要保持好安全距离,刘海片儿一点也不可怕!我根据官方文档量了下,边距是10pt(@1x) 另外,屏幕显示不再是矩形,而是切割成了大圆角矩形,为了避免显 ...
万字雄文讲透现代网络负载均衡和代理技术，终于弄懂负载均衡那点事
2019独角兽企业重金招聘Python工程师标准>>> 最近我注意到,针对负载均衡和代理这两项现代网络技术,有教育意义的介绍性材料相当稀缺.这引起我的思考:为什么会这样?在可靠的分布 ...
搞了半天，终于弄懂了TCP Socket数据的接收和发送，太难~
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章本文将从上层介绍Linux上的TCP/IP栈是如何工作的,特别是s ...

html640设计稿,移动设备分辨率（终于弄懂了为什么移动端设计稿总是640px和750px）...

html640设计稿,移动设备分辨率（终于弄懂了为什么移动端设计稿总是640px和750px）...相关推荐

最新文章

热门文章