移动设备分辨率(终于弄懂了为什么移动端设计稿总是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倍,所以这里的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)更清晰,相当于是一样的。

  

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

时间: 2024-11-09 09:49:25

移动设备分辨率(终于弄懂了为什么移动端设计稿总是640px和750px)的相关文章

这一次,终于弄懂了协变和逆变

一.前言 刘大胖决定向他的师傅灯笼法师请教什么是协变和逆变.   刘大胖:师傅,最近我在学习泛型接口的时候看到了协变和逆变,翻了很多资料,可还是不能完全弄懂. 灯笼法师:阿胖,你不要被这些概念弄混,编译器可不知道你说的什么协变逆变.这个问题,首先你得弄懂什么叫类型的可变性. 刘大胖:可变性? 二.可变性 灯笼法师:对,可变性是以一种类型安全的方式,将一个对象作为另一对象来引用.虽然是可变,但其实对象的引用地址是不会变的,只是忽悠下编译器. 刘大胖:师傅说的将一个对象作为另一对象来引用?这不就是继

Hibernate与Jpa的关系,终于弄懂

我知道Jpa是一种规范,而Hibernate是它的一种实现.除了Hibernate,还有EclipseLink(曾经的toplink),OpenJPA等可供选择,所以使用Jpa的一个好处是,可以更换实现而不必改动太多代码. 在play中定义Model时,使用的是jpa的annotations,比如javax.persistence.Entity, Table, Column, OneToMany等等.但它们提供的功能基础,有时候想定义的更细一些,难免会用到Hibernate本身的annotati

新知识:Java 利用itext填写pdf模板并导出(昨天奋战到深夜四点,知道今天两点终于弄懂)

废话少说,不懂itext干啥用的直接去百度吧. ***************制作模板******************* 1.先用word做出界面 2.再转换成pdf格式 3.用Adobe Acrobat 打开你刚刚用word转换成的pdf 会出现如下界面 下一步 点击浏览,选择刚才你转换好的pdf 下一步 4.打开后它会自动侦测并命名表单域,右键表单域,点击属性,出现文本域属性对话框,有的人说要改成中文字体,可是我没有改一样成功啦 5.一般情况下不需要修改什么东西,至少我没有修改哦 6.直

数据库主键和外键(终于弄懂啦)

一.什么是主键.外键: 关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录,该属性组就可以成为一个主键 比如  学生表(学号,姓名,性别,班级) 其中每个学生的学号是唯一的,学号就是一个主键 课程表(课程编号,课程名,学分) 其中课程编号是唯一的,课程编号就是一个主键 成绩表(学号,课程号,成绩) 成绩表中单一一个属性无法唯一标识一条记录,学号和课程号的组合才可以唯一标识一条记录,所以 学号和课程号的属性组是一个主键   成绩表中的学号不是成绩表的主键,但它

写了websocket个聊天室,然后终于弄懂了php的socket

原文网址:http://www.jnecw.com/p/1523 要理解socket就要先理解http和tcp的区别,简单说就是一个是短链,一个是长链,一个是去服务器拉数据,一个是服务器可以主动推数据. 而socket就是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计模式中,Socket其实就是一个门面模式,它把复杂的TCP/IP协议族隐藏在Socket接口后面,对用户来说,一组简单的接口就是全部,让Socket去组织数据,以符合指定的协议.-来自网络. 那么如何用php+

小白终于弄懂了:c#从async/await到Task再到Thread

1. 怎么解决async/await的无限嵌套 public async Task MyMethodAsync() { Task<int> longRunningTask = LongRunningOperationAsync(); // independent work which doesn't need the result of LongRunningOperationAsync can be done here //and now we call await on the task

学习PS必须弄懂的专业术语

在学习PS的过程中,我们经常会遇到一些专业术语,下面我们来对一些常用的.比较难理解的术语进行简单讲解. 像素:像素是构成图像的最基本元素,它实际上是一个个独立的小方格,每个像素都能记录它所在的位置和颜色信息.下图中每一个小方格就是一个像素点,它记载着图像的各种信息. 选区:也叫选取范围,是PS对图像做编辑的范围,任何编辑对选区外无效.当图像上没有建立选择区时,相当于全部选择.下图中的黑白相间的细线就是选择区的边界,对图像的操作只对选择区内有效. 羽化:对选择区的边缘做软化处理,其对图像的编辑在选

彻底弄懂 JavaScript 执行机制

本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可以得出结论: javascript是按照语句出现的顺序执行的 看到这里读者要打人了:我难道不知道js是一行一行执行的?还用你说?稍安勿躁,正因为js是一行一行执行的,所以我们以为js都是这样的: let a

这一次,彻底弄懂 JavaScript 执行机制

本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我. 文章转自:https://juejin.im/post/59e85eebf265da430d571f89 不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出内容和顺序.因为javascript是一门单线程语言,所以我们可以得出结论: javascript是按照语句出现的顺序执行的 看到这里读者要打人了:我难道不知道js