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

Posted 2021-11-30 wchjdnh

这篇文章能让你了解到什么是分辨率、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了?

首先来说一个重要的概念：视口 <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和二倍图