干货：屏幕分辨率那些事儿.pdf

干货：屏幕分辨率那些事儿 小编推荐：你是否遇到过显示分辨率的问题？是否搞不清楚那些 DPI PPI 4K px HD 等各类 名词的区别？是不是每次还在纠结各类屏幕间的关系？作为一个时常被抓去做设计的壮丁， 小编一听分辨率兼容就头疼，本文图文结合并且轻松愉快的讲解了有关分辨率、显示屏的专 有名词，妈妈再也不用担心我的界面不兼容了 ~yeah~ DPI 和 PPI DPI （Dots Per Inch ）最初用于衡量打印物上每英寸的点数密度，就是说你的打印机可以在一英寸 内打多少个点。 DPI 值越小图片越不精细。 当DPI 的概念用在计算机屏幕上时，就应称之为 PPI （Pixels Per Inch ）。同理： PPI 就是计算机屏 幕上每英寸可以显示的像素点的数量。你说 DPI 大伙也能理解。 Windows 系统默认 PPI 为96 ， Mac OS 系统默认 PPI 为 72 。 一般非视网膜屏幕的桌面电脑的 PPI 在72 到 120 之间。使用 72 到 120 之间的 PPI 进行设计基本可以 保证你的作品尺寸在大多数情况下看起来都差不多。 举个栗子： 27 ″Mac的PPI 是109 ，意思是每英寸有 109 个像素。显示器宽度（含边框）为 25.7 英寸，屏幕纯宽度 差不多 23.5 英寸，所以 23.5 × 109 ≈，由此可知屏幕的分辨率为2560 2560 × 1440px。 *我知道 23.5 ×109不等于 2560 ，实际上应该是 23.486238532 英寸，用像素 / 厘米能更精确点。我就 是举个栗子，你懂的。 PPI 在设计中的影响 假设你设计了一个 109 × 109px的蓝色方块，并且这个方块的物理尺寸为 1 ×1英寸。如果你的屏幕 是72PPI 的，那这个方块看起来就要比实际的物理尺寸更大点，因为 72PPI 的屏幕要显示 109px 差不 多需要 1.5英寸才行。 屏幕分辨率 屏幕分辨率对用户感知你的设计影响老大了。幸好 CRT 显示基本已经被淘汰了，用户使用液晶显示 器时基本都使用显示器的原生分辨率，这样看起来更舒服嘛。 分辨率就是屏幕上的像素数，例如 2560 × 1440px的屏幕，屏幕横向有 2560 个像素，纵向有 1440 个 像素，结合 PPI 的含义，你应该明白分辨率不是物理尺寸的定义。你可以有一个像你们家一面墙那 么大的屏幕或者像你的脚趾盖那么大的一块屏幕，它们的分辨率都是可以是 2560 × 1440px。 现在的液晶显示器都是有原生固定分辨率的（译者：我一般称为点对点分辨率），这根 CRT 显示器 的原理不同，在这就不细掰扯了。 咱的27 “Mac显示器有 2560 × 1440px的点对点分辨率， 109PPI 。如果把屏幕分辨率调低，你就会发 现屏幕上的窗口啊， icon 啊啥的东西都变大了，因为 23.5 英寸上的像素变少了。 其实像素还是那么多像素， PPI 还是那个 PPI ，它们就在那里不多不少。我说像素变少了的意思是当 你把屏幕分辨率调低时，操作系统会通过拉伸来填充屏幕，这个时候 CPU/GPU 会用点对点的像素 计算出来一套新的分辨率。 如果你想把 27 ” Mac的分辨率设为 1280 × 720px，GPU 就会把 4 个像素当成 1个像素用（ 2 ×2）。这能 咋的？当然是变糊了！这还算好的呢，毕竟是可以整除的像素，如果你弄什么三分之一、四分之三 这种幺蛾子，换算出来就有小数，那就更糊！不信你看下面的图。 例如下面这个例子，在点对点屏幕上拉一条 1px 的线，然后把屏幕分辨率降低一半，为填充 屏幕， CPU 必须以 150% 的形式展示视觉效果。相当于所有元素都变为之前的 1.5倍，但是又没有半 个像素，所以只能通过减低填充像素颜色的纯度达到目的。 这就是为啥