在网络的早期，你在640×480和800×600像素之间的某个地方设计。当然，我们可以追溯到更远的地方--第一台Macintosh或施乐的第一台桌面用户界面，但这些用户界面，但让我们假设老式的彩色CRT作为我们的基础。那也是我开始为网络设计的时候（1998年）。
但那是90年代末的事情，之后开始迅速变化。那个时代的显示器大多分辨率范围相似，超级重，不能显示太多颜色。此外，它们的刷新率也很低，导致滚动体验不理想。那个时代的显示器往往限制了网站所能达到的视觉效果。
既然我们现在生活在一个百万像素和百万色彩的科技世界里，我们就需要了解我们今天设计的屏幕。从早期的互联网时代开始，技术就在飞速发展。如今，你手中拿着的手机，其分辨率在二十年前是不存在的。
典型的90年代后期CRT显示屏的分辨率约为当前iPhone的1/6，后者的尺寸要小得多。
PPI或每英寸像素
在某些时候，每英寸72个像素成为了那些CRT显示器的显示标准，并且在很长很长的一段时间内都是如此。现在我们的笔记本电脑和移动设备都有更高的分辨率和像素密度。
但是两者的区别是什么呢？
分辨率就是显示屏的单个像素数。例如，第一部iPhone的基本分辨率是320 x 480。苹果公司决定，这个分辨率应该足以提供一个舒适的界面，所以它为这个平台设定了1倍密度的基准。
这一切都随着iPhone 4的推出而改变，它的视网膜显示屏。前提是像素太密集了，你不容易再看到单个的像素。基本(或1x)分辨率与之前的iPhone相同，但像素密度是该分辨率的倍数，从而使文字和图像更加清晰。iPhone 4将像素数量增加了一倍，达到了640×960，但实际设计的元素保持在320×480，并在设备上进行了放大。
好吧，但为什么还是表现得像320×480？为什么他们不干脆使用640 x 960作为 “可视的分辨率"？
为较旧的设备设计的项目将比较新的设备小2倍。这将使其无法舒适地使用。
在iPhone 4的2倍像素数之后，我们开始在手机、平板电脑和笔记本电脑上看到3倍、4倍以及更大的像素密度。
例如，现代的iPhone X使用了375×812的基础分辨率，但其实际像素数是3倍（3x），为1125×2436。
举个例子--如果你要设计一个按钮，你需要让它至少有44p高。这意味着在1x下设计它将是44个像素（在1x下，一个像素相当于一个点），而在2x下，它将是88个像素，但在你的设计中仍然是44点。
由于我们设计的UI都是在基于矢量的工具里面，我们不需要再担心实际的分辨率。1倍的基本分辨率作为模板，在低密度的屏幕上可以使用，在高密度的屏幕上则更加清晰和精确。
但你不需要记住这一点
大多数设计工具都为你提供了一个1x的模板，适用于所有流行的屏幕尺寸。你只需在1x处进行设计，编码界面就会自动放大。真是省心啊!
但要记住，有碎片化。
什么是碎片化？
可悲的是，越来越多的屏幕分辨率最终导致了一个非常碎片化的屏幕显示环境。我们为电视、笔记本电脑、平板电脑、手机、手表和物联网设备进行设计，这就需要进行大量的规划和针对设备的修改，才能让设计发挥作用。
在开始设计时，首先要问的问题是它要在什么样的屏幕上工作，典型的观看距离是多少。
一个电视应用应该比手机应用有更高的对比度和更重要的UI元素，这主要是因为它经常在房间的对面使用，而手机应用离脸只有几英寸的距离。
