聊聊Web开发中的一些尺寸概念

Question

无意间访问到 Dpi.lv 网站，这个网站主要就是显示你当前设备的分辨率、屏幕尺寸和Dpi，大致看了下网站的介绍，提到了很多陌生的术语，于是网上去找找资料，收集整理下关于显示器的一些术语解释。

屏幕尺寸

屏幕尺寸就是我们能看到的屏幕大小，都是用多少寸表示，他是一个物理属性，而且是固定的，生产的是多少就是多少，不会根据操作系统的设置发生变化。

屏幕尺寸的计算是屏幕的对角线，而不是屏幕的宽和高，所以我们知道一个屏幕是多少寸，并不知道他的宽高是多少，那么你可能要问为什么是对角线：

据说是因为历史原因，因为一开始的屏幕是CRT的球形屏幕，CRT屏幕的现实原理就是用电子枪打出高速的电子束打到显示屏上的荧光粉发光。电子枪的射击范围是一个圆，自然就用直径来表示大小。而之后显示器变成矩形以后其实内部依然是电子枪，所以就遗留下来这中屏幕尺寸的单位。

另外一个说法是说：显示器厂商认为使用对角线长度当做单位，可以让大家觉得显示器更大一点（是不是觉得很坑爹，就像硬盘的容量一样，厂商都是以1000为换算进制，而电脑却是以1024为换算进制，同样还有电信服务的带宽），还有一点，宽屏和窄屏有可能是同一个尺寸但是他们的面积其实是不一样的。

分辨率

每一个屏幕都有一个最佳分辨率，分辨率这个词在很多地方都有，比如相机、视频、扫描仪。这里说的就是显示器的分辨率。显示器是由一个个像素点(pixel)所组成的，一般所说的显示器分辨率是1280x720就表示这个显示器水平方向有1280个像素，垂直方向上有720个像素。

但是并非分辨率越高屏幕显示效果越好，还需要根据屏幕的大小来决定。也就是要看像素的密度(pixel density)，这个指标就是DPI(Dots Per Inch)或者PPI(Pixels Per Inch)，即英尺屏幕上像素或者是点的个数。

如果设置了错误的分辨率，那么显示的文字图像就会变形、模糊，看着十分难受，严重的还会影响我们的视力健康，看久了还可能会头痛，对于处女座的朋友绝对不能忍。

DPI/PPI

这两个的缩写分别是：

DPI = Dots Per Inch
PPI = Pixel Per Inch

两个参数的区别就在于Dot和Pixel的区别，Dot值的是显示器上每一个物理的点，而pixel指的是屏幕分辨率中的最小单位，大多数情况下，一个像素对应屏幕上一个物理的点，但是有时候他们又不是一样的，比如现在好点的手机屏幕，一个像素需要多于一个屏幕上的物理点来显示，这个有另一个叫法叫做dppx(dot per pixel)，即每个像素中有多少个点。

如何计算DPI

经常看到别人说多少DPI，但是你知道这个是如何计算出来的么，以我现在使用的iPhone SE手机为例，屏幕的分辨率是640X1136，屏幕的尺寸4吋，因为不知道具体的边长，肯定不能分开算，4是对角线长度，那直接用勾股定理算对角线像素，然后再除以4，算出来就是 dpi = 326 像素/英寸。

$DPI = \frac{\sqrt{height^2 + width ^ 2}}{inch}$

但是大多是情况大家并不会把这两个名词分的那么清楚，所以如果这两个出现的时候基本上都表达的是同一个意思。即PPI（每英寸中有多少个像素）。

像素

像素只是对电子显示屏有效，我们的屏幕都是由一个个像素点构成的一个平面，这里我们只是谈谈显示屏的像素，像素的多少在出厂的时候就已经固定了，但是并不是像素越多，显示器的尺寸就越大，这还与DPI有关。

英寸

英寸在平面设计中用的比较多，当然在国内的设计行业，用CM厘米的比较多，因为这是我们自己的度量尺寸，英寸和厘米还不是相等，不过都是长度单位而已。

这里就有一个问题了，如果我们知道一张宣传单的尺寸，我们需要在电脑上设计宣传单，那么我们应该建多少分辨率的图片才能满足印刷需求。

像素、英寸和DPI的关系

比如现在我要设计一张7寸X10寸，DPI是300的图片，那么我该怎样设置图像的像素长宽度呢？其实很简单只要简单地把这两者相乘就可以了，如果用方程表示就是：

像素 = 英寸 * Dpi

所以这就应该是一副宽2100像素，高3000像素的图片，使用这个简单的公式，只要你有想要的尺寸和 Dpi ，就可以换算出对应的像素大小。

同理如果我们知道一个图片的大小和Dpi，那么我们也可以计算应该打印多大是最合适的显示效果。

PS：在Photoshop中，我们的根本就不需要计算，软件已经给我们设置好了，我们只需要输入我们需要的尺寸和分辨率，软件就会自动给我们创建合适的文档尺寸。