用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图

用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图
强烈推介IDEA2021.1.3破解激活,IntelliJ IDEA 注册码,2021.1.3IDEA 激活码  

大家好,我是架构君,一个会写代码吟诗的架构师。今天说一说用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图,希望能够帮助大家进步!!!

这篇文章能让你了解到什么是分辨率、dpr、dip、ppi (dpi相当于ppi,dpi用点表示物理像素)

首先从最简单的ppi开始:

一部手机,有大有小,怎么知道手机的大小用尺子量一量即可,有两条边量哪一条呢?勾股定理告诉我们斜边越大,面积就越大,量斜边没跑了。量的单位可不是cm,而是英寸。1英寸= 2.54cm,这个相信看过《新华字典》或《现代汉语词典》的人都知道,上面附有计量单位表。

用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图

 

嘿嘿,又引出了一个物理像素的概念:物理像素就是分辨率的那两个数字,两个数字代表了长宽两条边物理像素的个数,以960 x 640为例:

用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图

说完了物理像素,接下来说说逻辑像素:这个简单就是平常css文件里的 px 。注意:这不简单,逻辑像素能改变的,什么情况下?按住你的ctrl + 滑动滚轮,是不是像素变大了。所以这个px还不能作为统一单位。

谁能作为统一单位?没错是px,扯呢?上面不是说不行了吗?这个px是设备独立像素,如果用原生安卓开发就用dp,原生ios就用pt,如果说是一个概念的话,就理解成对px的重新认识。但和上面的还是有关系的,设备独立像素1px = 没有放大时候的1px像素。

要这设备独立像素有何用?顺带一提,除了物理像素是真实存在的,其他的像素是虚拟的

设想一下 : 如果用物理像素,刚才说了可变,那么好玩了,假设电脑屏幕尺寸一样,我电脑分辨率高,那么物理像素点小一点,我的1px就小一点,你的分辨率低,1px就大一点。那还怎么开发?难道还要去找电脑物理像素 = 手机物理像素的电脑,手机又不只是一种分辨率。设备独立像素说我不管你的物理像素多少,你的1px就必须是那么大。接下来说说为什么电脑上明明我设置了10px到手机那么小的屏幕上就变成5px了?

首先来说一个重要的概念:视口 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no,maximum-scale=1.0, minimum-scale=1.0">,就是这么一坨重要的视口,他有什么作用呢?作用大了去了。没有视口,html元素默认就是浏览器的宽度,就是要把浏览器的所有内容都显示在手机上,而手机放不下,只好缩小。现在视口可以随着设备宽度(不是尺寸那个宽度,也不是物理像素,是手机的设备独立像素,其实浏览器开发者工具切换移动端显示的就是这个,并不是分辨率,而是分辨率 / dpr)变化。然后根据有些宽度百分比的就显示不一样大小了。

下面一幅图说明dpr和二倍图

用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图

有兴趣的朋友、数学功底比较好的朋友可以自己推导一个手机dpr计算公式 : 我已经推导出来了但这只是大约的公式,并不是最精确的公式,我只用了一条边的数据,手机物理像素是一条边的所有物理像素,手机尺寸也是一条边的的,电脑也是一样,这样方便一点,不然每次都要用到斜边的勾股定理很麻烦。

用一篇文章了解ppi,dpr,物理像素,逻辑像素,以及二倍图,具体推导过程想要了解的朋友回信我哦!

 

转载于:https://www.cnblogs.com/wchjdnh/p/10878149.html

本文来源weixin_30595035,由架构君转载发布,观点不代表Java架构师必看的立场,转载请标明来源出处:https://javajgs.com/archives/29821

发表评论