这篇文章能让你了解到什么是分辨率、dpr、dip、ppi (dpi相当于ppi,dpi用点表示物理像素)
首先从最简单的ppi开始:
一部手机,有大有小,怎么知道手机的大小用尺子量一量即可,有两条边量哪一条呢?勾股定理告诉我们斜边越大,面积就越大,量斜边没跑了。量的单位可不是cm,而是英寸。1英寸= 2.54cm,这个相信看过《新华字典》或《现代汉语词典》的人都知道,上面附有计量单位表。
嘿嘿,又引出了一个物理像素的概念:物理像素就是分辨率的那两个数字,两个数字代表了长宽两条边物理像素的个数,以960 x 640为例:
说完了物理像素,接下来说说逻辑像素:这个简单就是平常css文件里的 px 。注意:这不简单,逻辑像素能改变的,什么情况下?按住你的ctrl + 滑动滚轮,是不是像素变大了。所以这个px还不能作为统一单位。
谁能作为统一单位?没错是px,扯呢?上面不是说不行了吗?这个px是设备独立像素,如果用原生安卓开发就用dp,原生ios就用pt,如果说是一个概念的话,就理解成对px的重新认识。但和上面的还是有关系的,设备独立像素1px = 没有放大时候的1px像素。
要这设备独立像素有何用?顺带一提,除了物理像素是真实存在的,其他的像素是虚拟的
设想一下 : 如果用物理像素,刚才说了可变,那么好玩了,假设电脑屏幕尺寸一样,我电脑分辨率高,那么物理像素点小一点,我的1px就小一点,你的分辨率低,1px就大一点。那还怎么开发?难道还要去找电脑物理像素 = 手机物理像素的电脑,手机又不只是一种分辨率。设备独立像素说我不管你的物理像素多少,你的1px就必须是那么大。接下来说说为什么电脑上明明我设置了10px到手机那么小的屏幕上就变成5px了?
首先来说一个重要的概念:视口 ,就是这么一坨重要的视口,他有什么作用呢?作用大了去了。没有视口,html元素默认就是浏览器的宽度,就是要把浏览器的所有内容都显示在手机上,而手机放不下,只好缩小。现在视口可以随着设备宽度(不是尺寸那个宽度,也不是物理像素,是手机的设备独立像素,其实浏览器显示的就是这个,并不是分辨率,而是分辨率 / dpr)变化。然后根据有些宽度百分比的就显示不一样大小了。
下面一幅图说明dpr和二倍图
标签:dpr,分辨率,像素,1px,手机,px,ppi,物理
来源: https://www.cnblogs.com/wchjdnh/p/10878149.html