（全解析）屏幕尺寸，分辨率，像素，PPI之间到底什么关系？

?今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思，以及他们之间到底有什么关系。这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版，保证让你看得懂。

咱们从手机开始说起吧。先上一张图，给大家看看关于手机屏幕方面的一些参数。红框内的三个参数，大家一定都不陌生，我也不陌生。不过讲真的，就在不久前，我连手机的屏幕尺寸到底是怎么算出来的都不知道。下面我们开始慢慢讲。

下面这张图是华为荣耀7的尺寸图，图上写的是5.2英寸。那么这个5.2英寸到底是怎么算出来的呢？在说这个问题之前，我们先进行一下单位的换算。我们平时是不用英寸这个单位的，我们用的是毫米，厘米，米这些单位。那么英寸和毫米，厘米之间怎样的换算关系呢？我也不知道，所以我百度了一下。

1英寸（inch）=2.54厘米（cm）

原来一英寸相当于我们的2.54厘米这么长。现在让我们回到5.2英寸到底是怎么算出来的这个问题。一开始呢，我觉得可能是手机屏幕的面积有这么大吧，后来我百度了英寸之后，才发现自己有多愚蠢。因为英寸是长度单位，面积的表示要用面积单位，英寸显然不可以表示面积。从这一点，就否认了我的想法。

其实，我们所说的这个5.2英寸是手机屏幕对角线的长度。

我这么一说，有点数学常识的人就知道手机的屏幕尺寸是怎么算的了吧。没错，就是那个勾股定理了，知道手机屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。

上面的图显示，华为荣耀7的分辨率是1920PX*1080PX。那么，这个分辨率又是怎么回事呢？可能大家注意了，1920和1080后面都跟了PX的字样，这个PX就是我们很熟悉的像素了，这个像素咱们后面讲，现在你只要明白，像素是分辨率的单位就好了。

在讲解分辨率之前，我们要明白一个概念。在我们手机上呈现的一条线，一个面，一张图像都是由最小的单位像素来表示的，你也可以简单理解为是由一个个小方块组成的。看看下面这张图你就明白了。

所以呢，分辨率1920px*1080px的意思就是，在这个华为荣耀7的5.2英寸屏幕上，在竖向的高度上有1920个像素块，在横向的宽度上有1080个像素块。

你可能注意到了，手机的屏幕是个长方形，高是1920px，宽是1080px。你稍计算就会发现，这个高和宽的比例是16:9的。说到16:9这个比例，经常看视频的同学一定就不陌生了。手机屏幕有各种分辨率比，这个比你也可以看作是手机屏幕的尺寸比。根据百度百科显示，手机分辨率之所以表示成1920px*1080px这种形式，也是为了方便表示手机屏幕的大小。这里的大小，应该指的就是手机屏幕的尺寸吧。其实，告诉你一个手机的分辨率，你真的就能计算出手机屏幕的尺寸吗？那么，还差什么条件才能计算出手机屏幕的尺寸呢？

屏幕像素密度，即每英寸屏幕所拥有的像素数，英文简称PPI。在读到这个每英寸屏幕时，我曾经深深的疑惑，这个每英寸是不是每平方英寸的简称呢？事实证明，我还是太年轻，这个英寸跟之前手机屏幕的尺寸一样，也是对角线的长度。所以，我们可以这么理解屏幕像素密度，即在一个对角线长度为1英寸的正方形内所拥有的像素数。说到这里，大家可能还是有些疑惑的，没事，接着看下面。

这三个专业名词之间，有着非常严谨的关系。为啥说严谨呢，因为这三者之间，有一个公式可以表示。

这个公式真是简单明了，把很多疑问都给我们解决了。我们还是拿华为荣耀7手机为例，我们知道它的尺寸为5.2英寸，分辨率为1920px*1080px（1920px就是公式里的纵向，1080px就是公式里的横向了）。你不信的话就用公式算一下，最后得出的PPI，是不是就是424ppi。我算了一下，结果是423.6359942465958，懂得四舍五入的同学就知道424是个近似值了。

我先这么说一句，像素是没有实际的物理尺寸的。为啥呢，按照惯例，举个例子。

上面的这两张图，第一张是苹果6手机的屏幕参数，第二张还是出镜率最高的华为荣耀7的屏幕参数。大家注意看，这两个手机的分辨率都是1920px*1080px。但是，苹果手机的屏幕尺寸比华为荣耀7小了0.2英寸。又一个但是，苹果手机的屏幕像素密度（PPI）却比华为荣耀7高了45个PPI，也就是每英寸像素个数多了45个。这说明了啥？说明了同样的一英寸的长度，苹果手机用469个ppi来显示，华为只用了424个ppi来显示。你能告诉我哪个手机的显示效果更加精细吗？同样是一英寸，同样都是像素，为啥苹果手机一英寸有469个像素，华为只有424个呢？我们知道，英寸是长度单位，它有固定的物理尺寸。那么问题就只能出在了像素身上。这说明，像素这个东西，在苹果手机上变小了。所以，像素这个东西，就像金箍，能变大能变小。

你错啦，要是这么简单，我写这篇文章有个卵用？其实类，在同一个设备上，它的像素个数是固定的，这是厂商在出厂时就设置好了的。只有不同的设备之间，才有像素大小的区别。既然在同一个设备上，像素点数早就设定好了，那电脑上可以调整分辨率是怎么回事？我再怎么调，像素点数还是那么多啊。

人家系统给你推荐的是1366px*768px的分辨率，你知道意味着什么吗？没错，微软在这块屏幕上竖向设置了768个像素，横向设置了1366个像素。再怎么拉扯，这个数字是不会变了。那么，为啥我还能调整分辨率呢？我要是调整到800px*600px，按照定义，横向就是600个像素，竖向就是800个像素了啊。其实呢，你把分辨率调成800*600，系统就会分配给你800*600个有效像素个数，也就是真实的色彩块。其他的个数呢，就由系统自作主张，通过一系列运算给你一个模拟色彩块，填充成正好1366*768个色彩块。这些拿来充数的像素块，和真实的像素块放到一起。就好比一个正规军，里面掺了很多杂牌军一样，只能是队伍不好带了。

要回答这个问题，就要先明白，一个像素到底包含了什么？一个像素其实就是一个色彩块，你不信的话，就去前面看看那张风雨雷电图。同样的一英寸，苹果手机能展示469个色彩，华为只能展示424个色彩，当然是苹果手机的显示效果更好了。也就是苹果6在出厂时，早就在屏幕上设置了同样个数更小的像素块，也就意味着可以显示更多的色彩。

废话，看公式啊。

废话，看公式啊。还有，苹果6和荣耀7的例子还很鲜活的摆在这呢。

废话，看公式啊。

鉴于篇幅太长，我本来还想把安卓手机上app的图标显示问题说一说，看来只能留到下一次了。

维基百科中的定义：像素，为视频显示的基本单位，译自英文“pixel”，pix是英语单词picture的常用简写，加上英语单词“元素”element，就得到pixel，故“像素”表示“画像元素”之意。它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。

对于一个像素可以认为是由显示器的一个个“点”来显示的，比如我们电脑屏幕就是由很多很多的像素点构成。因此衡量电脑屏幕分辨率有一个很重要的物理参数DPI（dots per inch，每英寸点数），显然单位面积中像素的点数越多，DPI的值也就越大，屏幕展现的细节就越多，画质相对也就越清晰。

在计算机领域，分辨率一般用PPI（pixels per inch），表示每英寸最多可以 呈现的像素个数，但是PPI是可以缩写为DPI的，两者表示都没问题 。相反在印刷领域，会经常看到DPI这个参数，比较早的喷墨式印刷机喷的都是一个个点。

以我电脑为例，用勾股定理求出斜边2203px，然后除以设备斜对角线15.6，最后得出 PPI=141，表示在我电脑上一英寸的直线上可以呈现141个像素点，一英寸的矩形区域，可以呈现141*141=19881个像素点。

同理可以计算出苹果电脑（1440x 900） PPI=127 ，（2560 x 1600） PPI=227

（补充：屏幕的PPI用的是物理分辨率不是逻辑分辨率，所以需要我们先查出屏幕的物理分辨率，那什么是物理分辨率？什么是逻辑分辨率？）

先明确一个很重要的概念，分辨率有两种，逻辑分辨率和物理分辨率！！！

逻辑分辨率：电脑中系统可以调节的分辨率，这和电脑系统有关，系统可以控制的分辨率称之为 逻辑分辨率 。

物理分辨率：屏幕出厂就决定了物理分辨率，不管怎么调节你电脑屏幕最原始的分辨率是永远不会变的（除非换显示屏），这是硬件技术，屏幕最原始的分辨率称之为 物理分辨率 。

（补充：我们平时所说屏幕分辨率，其实是指系统设置的逻辑分辨率。当逻辑分辨率和物理分辨率匹配一致时效果最好。Windows中，电脑系统推荐的逻辑分辨率和物理分辨率是相等的。同时可以看到系统提供了很多分辨率，系统提供最高的逻辑分辨率通常就是设备物理分辨率。知道物理分辨率和屏幕尺寸，就可以开开心心的算屏幕PPI了）

但是如果有人问你物理分辨率和逻辑分辨率是什么，肯定不能回答，物理分辨率就是屏幕那个，逻辑分辨率就是操作系统那个，所以我们需要继续打破砂锅问到低。

物理分辨率： 简单的理解物理分辨率就是一块屏幕每英寸最多能呈现的像素点数。物理分辨率和屏幕尺寸没有关系 ，比如我电脑是15.6寸，分辨率是1920*1080的，但是我手机只有5.99寸，分辨率也是1920*1080。它不是一个视觉单位，简单理解是一个个的物理像素点，也不能理解为长度单位。只能用来描述点的个数，不能描述长度。

刚才计算了我电脑的PPI=141（每英寸最多可以呈现141个像素点），现在假设在我电脑屏幕上切下一块一英寸的正方形，那么这块正方形小屏幕最多能呈现141*141=19881个像素点，这是没有任何问题的。假如有另一块一英寸的屏幕，这块屏幕的做工更加精细，使用的技术牛笔，PPI竟然达到了227，那么这个一英寸的屏幕最多能呈现的像素点数就是：227*227=51529个。所以同样大小的两块屏幕，PPI越大，能呈现的像素点就越多，物理分辨率也就越大。所以说PPI是衡量一块屏幕显示效果的一个重要参数。

而逻辑分辨率和物理尺寸有关，简单理解就是一个长度单位，如果往深层次的说，这和栅格渲染有关系。 逻辑分辨率和物理分辨率有一种对应关系，后面移动设备分辨问题我会解释。现在继续先来简单理解一下，还是用我电脑举栗子。

我电脑分辨率1920*1080（现在我电脑物理分辨率和逻辑分辨率相等），现在知道PPI=141，能求出我电脑是多少英寸的吗？底下一片人都在说废话，你刚才就是用你电脑分辨率和15.6求的PPI=141。如果现在我们有一张1920*1080的壁纸，那么用PS工具什么的，都可以量出144px的长度就是一英寸。但是这并不能代表1920*1080逻辑分辨率对应的就是15.6英寸的设备，现在如果在另个设备PPI=375，同理可以求出设备是5.8英寸的，差不多和手机一样大，这时我们需要量出375px，才是一英寸的长度。 逻辑分辨率可以表示长度，但是它和设备的PPI有很大的关系。

如果你觉得还是不能理解，可以继续看下面的例子：

现在有一张141*141分辨率的，那么在我电脑上这张显示的大小就是一英寸的矩形，因为我电脑每英寸可以呈现141个像素点，反过来说141个像素点在我电脑上就表现一英寸的大小。现在将这放在另一台电脑上，电脑屏幕尺寸和我电脑相同，但是PPI=70。那么在屏幕显示长度是几英尺？2英寸！（如果答对了，你就可以放过下面这个例子，不用看了）

如下图A屏和B屏，假设都是一英寸大小，A屏每英寸可以显示两个像素点，B屏可以显示四个像素点。现在有一张4*4像素的，在B屏刚好完美呈现，但是在A屏想完整显示，A屏向右需要再加两个两素点，向下再加两个像素点。所以在A屏上需要两英寸。

总结：逻辑分辨率这块可能是有点不好理解，很抽象，如果纠结很久还是不清楚，也不用纠结了，下面实战篇会给出具体的例子。

单从硬件上面看，苹果电脑屏幕物理分辨率就已经比普通电脑物理分辨率高出很多。当然你肯定要说为什么要拿苹果最好的设备去比较。我朋友用的是macbook air ，13.3,1440*900，但是画面呈现效果依然比普通电脑好很多。屏幕是一个因素，但是不是绝对的，屏幕的画面显示效果还和操作系统、显卡很多因素有关。苹果系统的图形渲染技术就是全世界最好的，所以苹果屏幕所呈现的画质自然要比普通屏幕看起来更细腻更舒服。

144p (192×144，20帧/秒)，4：3，录制一分钟大约1MB；

240p (320×240，20帧/秒)，4：3，录制一分钟大约3MB；

360p (480×360，20帧/秒) ，4：3，录制一分钟大约7MB；

480p (640×480，20帧/秒)，4：3，录制一分钟大约12MB；高清

720p (1280×720，30帧/秒) ， 16:9，录制一分钟大约35MB；超清

1080p (1920×1080，30帧/秒) ，16:9 ， 录制一分钟大约80MB。蓝光

除此之外还有更高的分辨率：

2K （1152 × 2048）

4K（2304 × 4096）

像素你真的会吗？（px、dp、pt、rpx、rem）-移动设备分辨率问题

1、像素维基百科

2、A pixel is not a pixel is not a pixel

3、前端工程师需要明白的「像素」

4、Syntax and basic data types

5、像素密度的危机

每月更新两篇，质量保证！

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com