先来聊一聊几个基本概念
在正式开始之前，我们先集中解释下几个最最基本的名词，这些名词是字体、分辨率相关出现的专业术语，会在下面的文章里面频繁出现。
cm & inch
这是两个会常用到的长度单位：厘米（cm）、英寸（inch）。它俩都是物理尺寸的计量单位，一般人也应该都熟悉，在这里提及一下不做详细展开。下面是这两个常用单位的转换：
1英寸（inch）=2.54厘米（cm）
px
中文名称为像素。它是图像在计算机显示屏上显示的基本单位，译自英文“Pixel”（Pix 是英语单词 Picture 的常用简写，加上英语单词“元素” Element，就得到 Pixel）。既然是一个基本单位，当我们把看到的图像放大的时候，基本组成元素就是一个一个方块，一个方块就是一个像素，如下图所示：
关于“Pixel”在屏幕显示上的尺寸概念在下文中会详细说明。
DPI
Dots Per Inch ：即每英寸(所打印)的点数。DPI 用来表示打印机打印分辨率。这是衡量打印机打印精准度的主要参数之一。DPI 值越小，图片越不精细。这里用一张图片来更直观形象的说明 DPI。
PPI
Pixels Per Inch：即屏幕像素密度。这个概念和 DPI 类似的计算方法，只是在计算机显示器屏幕上，我们的基本单位是像素（Pixel），即：每英寸长度上能够显示的像素数量。
屏幕尺寸、分辨率、像素以及和PPI之间的关系
明确了这些基本概念之后，我们就开始切入正题。在开始聊它们之间的关系之前，先抛一个问题，一个像素的尺寸是多大（相信很多人都会被这个问题带进坑里）。带着这个问题我们继续往下看：
屏幕尺寸（Physical screen size）
举个🌰：下图是27英寸iMac（老款）的尺寸图，图上写的是27英寸。那么这个27英寸到底是怎么算出来的呢？
我们所说的这个27英寸是显示屏对角线的长度。回顾一下勾股定理：知道屏幕的长和宽，然后利用勾股定理，就可以算出斜边的长了。还有个更简单的方法，只要用尺子量一下它的对角线是多少厘米，然后再换算成英寸就搞定了。
分辨率（Pixel Screen Size）
上面的图显示，27英寸iMac的分辨率是2560×1440px。那么，这个分辨率又是个啥呢？大家可能注意到了，2560和1440的后面都跟了px的字样，这个px就是我们所熟悉的像素了（关于像素的概念我们后面讲）现在你需要明白的是，像素是分辨率的单位。屏幕分辨率就是屏幕上的像素数。分辨率2560×1440px的意思就是，在这个27英寸iMac的屏幕上，在竖向的高度上有1440个像素块，在横向的宽度上有2560个像素块。
像素（Pixel）
回到我们之前挖下的那个坑（像素的尺寸是多大），像素是没有实际的物理尺寸的。像素尺寸这个伪命题其实是以英寸为单位的屏幕尺寸和屏幕分辨率以及屏幕像素数之间的一个关系。如果还不好理解，我们再来举个🌰：
这两个手机的分辨率都是1920×1080px。苹果手机的屏幕尺寸比华为荣耀7小了0.2英寸，但是苹果手机的屏幕像素密度（PPI）却比华为荣耀7高了45个PPI，也就是每英寸像素个数多了45个。为什么会这样？我们知道，英寸有固定的物理尺寸的长度单位。那么问题就只能出在了像素身上。这说明，像素在苹果手机上变小了。所以，像素这个东西，能伸能缩，能大能小。
这些概念之间的关系
最后我们就再来一发简单的🌰来完结这三者之间的关系。我们继续选用一台27英寸的iMac作为范本（如下图）：它的 PPI 是 109, 意思是每英寸有109个像素；显示器宽度（含边框）为25.7英寸，屏幕纯宽度差不多23.5英寸；分辨率为2560×1440px。
基本公式
所以 √2560²+1440² ÷ 27（inch）约等于109（PPI）
扩展公式（屏幕的长宽尺寸）
P=分辨率 U=屏幕(长宽)尺寸 R=PPI
所以23.5×109 ≈2560，由此可知屏幕的分辨率为2560×1440px。
PPI在设计中的影响
前面说了这么多PPI的由来，所以它对我们在设计中到底有没有影响呢？假设你在27寸的电脑上（109 PPI）设计了一个109×109px的蓝色方块，那么这个方块的物理尺寸为1×1英寸。如果你的屏幕是72PPI的，那这个方块看起来就要比实际的物理尺寸更大点，因为72PPI的屏幕要显示109px差不多需要1.5英寸才行。
调整屏幕分辨率会发生什么
27寸Mac显示器有 2560×1440px 的点对点分辨率（原生分辨率），109PPI。如果把屏幕分辨率调低，你就会发现屏幕上的窗口及icon等都变大了，因为23.5英寸（横向尺寸）上的像素变少了。（其实像素还是那么多像素，分辨率还是那个分辨率，它们就在那里不多不少。像素变少了的意思是当你把屏幕分辨率调低时，操作系统会通过拉伸来填充屏幕，这个时候CPU/GPU (Graphics Processing Unit-图形处理器) 会用点对点的像素计算出来一套新的分辨率。）例如：如果你想把27寸Mac的分辨率设为1280×720px，系统就会分配给你1280×720个有效像素个数，也就是真实的色彩块，GPU就会把4个像素当成1个像素用（2×2）。其他的个数呢，就由系统自作主张，通过一系列运算给你一个模拟色彩块，填充成正好2560×1440个色彩块。这些拿来充数的像素块，会和真实的像素块放到一起。图像会变模糊，但这毕竟是可以整除的像素，如果你弄什么三分之一、四分之三这种换算出来就有小数，那就更糊。
记住：如果你想在查看设计时尽可能保持像素完美，一定要将屏幕分辨率设置为显示器的点对点原生分辨率。
为什么会变模糊
例如下面这个例子，在点对点屏幕上拉一条1px的线，然后把屏幕分辨率降低一半，为填充屏幕，CPU必须以150%的形式展示视觉效果。相当于所有元素都变为之前的1.5倍，但是又没有半个像素，所以只能通过减低填充像素颜色的纯度达到目的。
Retina屏幕是什么
Retina屏幕是在iPhone4发布时进入大众视野的，叫 Retina 是因为屏幕的PPI高到人类的肉眼完全无法看到像素点。从技术上讲就是他们在物理尺寸与上一代相同的屏幕上塞了2倍的像素。
不缩小元素的大小，相同尺寸屏幕上的元素精度提高了2倍。
- “Retina”是苹果公司的专有名词，其他公司只能用“HI-DPI”之类的词，或者不提。
- Apple产品的DPI转换和分辨率的差异非常好理解，因为只有一种倍数。
转换系数
当你掌握了转换系数后，基本可以忽略设备的具体参数。举个🌰：同样是iPhone 3GS和iPhone 4，物理尺寸一样的屏幕长宽各是2倍数量的像素，那这个转换系数就是2，就是说你的原件容纳了之前4倍数量的像素，所以你要把它的尺寸的长宽都扩大2倍。
当我们谈3P时在谈些什么（DP、PT和SP）
DP & PT
DP和PT是用来定义应用在不同设备、不同DPI下的标准单位。DP（叫DiP也行）就是Device independent Pixel（设备独立像素）的缩写，PT就是point。PT是apple家的东西，DP是android家的东西，其实就是一个人有两个名字。
DP作为长度单位，与具体屏幕密度无关，显示的时候根据具体平台屏幕密度的不同最终转换为相应的像素长度，具体转换规则是: 1dp =（目标屏幕密度/标准密度）×px,标准密度为160dpi，例如，1dp长度在密度为160dpi的平台表示一个像素的长度，而在240dpi的平台则表示1.5个像素的长度。Dp 的引入初步的解决了屏幕适配的问题，所以在Android项目中不要使用px作为单位，尽量使用dp作为单位。例如：左边的44px是非retina屏，右边的88px是retina屏
SP
SP跟DP不一样，但用法基本一样，SP是用来专门定义文字大小的（Scale-independent pixels）。SP受用户android设备字体设置的影响，定义SP和定义DP一样，把在1x scale内的清晰大小作为标准。
设置PPI对3P的影响
之前已经介绍过了PPI、retina和转换系数。现在我们可以思考下这个问题：如果我改变了设计工具里的PPI，会发生什么？软件中的PPI配置是从印刷品时代继承而来。如果你只做Web设计，那PPI对你的设计基本没什么影响。软件会把你的设计通过转换系数转换为合适的像素，这就是为什么我们使用转换系数而不是直接使用PPI的具体数值。
144PPI的画布上字比72PPI上大了1倍，但方块的大小基本没变化。因为Photoshop中PT的显示会根据PPI的值来决定，在2倍的PPI上就有2倍大的文本。那什么情况是以像素作为定义标准呢，看那个蓝色方块，它的大小就没变。一个像素就是一个像素，无论在什么PPI配置下，一个像素还是一个像素，它只受屏幕点对点像素PPI的影响。在进行数码设计时，PPI只会作用在使用PT这种单位时例如字体。
注意：
- PPI配置对做web设计基本没有影响。
- 像素是任何数码的度量单位。
- 做设计时使用通用的PPI配置，这样能让你更容易感知这个设计在目标设备上的效果。
- 设计时使用相同的PPI配置。
在iOS上运用 PPI
待补充
在Andriod上运用 PPI
待补充
Mac、Chrome OS上的PPI
Mac（OSX）和Chrome OS在处理PPI方面是十分相似的。两个OS都支持常规的PPI（100%）和hi-res/retina PPI(200%)。待补充
Doc and resources
Designer’s guide to DPI屏幕尺寸，分辨率，像素，PPI之间到底什么关系？
http://whuhan2013.github.io/blog/2016/05/25/android-screen-summary/
http://www.jianshu.com/p/a311045232e6https://blog.kyleduo.com/2016/10/24/density-01-basic
https://material.io/devices/
若有收获，就点个赞吧
0 人点赞
