我最近在 DM 中收到以下消息：
多年来我一直在使用 HTML 和 CSS 进行构建，但我仍然不知道如何实现像素完美的设计
如果您不熟悉这个术语，“像素完美”是指您的 HTML/CSS 实现应尽可能接近原始模型。测量和间距应该精确到像素。
我经常听到这种担忧；即使经过多年的经验，许多前端开发人员也很难完美地重现设计。
当设计师给我们一个完整的模型时，他们相信我们会忠实地实现他们的愿景。他们的工作是通过我们的实施集中起来的，他们一直在祈祷，我们不会在这个过程中过多地破坏它。*
我们究竟如何生产出让我们的设计师引以为豪的东西？将设计复制到像素甚至是现实的吗？为什么这么难？
在这篇文章中，我们将回答这些问题，并学习一些技巧来帮助我们更接近像素完美✨
链接到这个标题像素非常接近
让我们提前解决这个问题：在严格的法律条文意义上，我认为像素完美实际上是不可能的。
我们编写的 HTML 和 CSS 需要在令人眼花缭乱的各种设备上运行。有很多变量会影响实现的呈现方式。
为了好玩，我截取了完全相同的亚马逊列表的截图*跨两个不同的设备。
使用下面的按钮在它们之间切换，以查看差异：
铬，视窗
Safari、MacOS
切换扩张
并排查看时，这两个屏幕截图看起来非常相似，但在它们之间切换时，很明显它们并不相同。它们包含非常不同的像素。
当我在 DigitalOcean 工作时，我能够参观他们的一个数据中心。这是狂野而超现实的。巨大的房间有数百排，每排都有几十个机架，每个都有几十台电脑。每台机器都是一样的。
我有时会嫉妒后端开发人员。后端有很多难题，不要误会我的意思，但至少他们控制了运行代码的设备！它不必在所有可以想象的设备上运行，从 5 英寸手机到 72 英寸电视再到智能冰箱。
在上面的演示中，我只更改了两个变量：操作系统和浏览器。想想有多少其他因素会影响绘制的内容：
- 设备类型（台式机、笔记本电脑、平板电脑、手机、手表...）
- 屏幕尺寸/窗口尺寸
- 屏幕像素密度
- 屏幕技术（OLED、LCD、CRT、E-ink）
- 用户缩放级别/默认字体大小
- 性能（设备硬件、服务器负载、网络速度……）
- 设备色彩校正（例如夜间模式）
这只是我的想法；我敢打赌你有一对我错过了！
所以很明显，当涉及到屏幕上单个像素的 RGB 值时，我们永远无法确保 100% 的一致性。这是一个不可能的标准。但这也不是重点。
没有人要求事情在放大镜下看起来一样。*大多数情况下，设计人员希望实现看起来与肉眼几乎相同，并具有明显的错位和收紧的松散间距。他们希望它像素非常接近，而不是像素完美。
让我们谈谈我们如何做到这一点。
链接到这个标题测量距离
当你收到一个新的模型，热的印刷机时，它通常会通过某种设计工具交付给你，比如 Figma 或 Zeplin。
这些工具很棒，因为与静态图像不同，它们是设计的实时表示。您可以选择单个元素并挑选颜色和尺寸。
不幸的是，这些信息并不总是值得信赖的！仅仅因为 Zeplin 告诉您标题和段落之间有 64px 的间隙并不意味着它是正确的。
像 Sketch 这样的工具本质上是设计工具；他们从设计界继承了一套实践和特质，而且他们并不总是整齐地映射到网络上。当然，它们会很接近，但不一定足够接近。
旧世界的排版
如果您对为什么设计工具中的数字可能不精确感兴趣，那么这就是为您准备的。如果您不介意，请随意跳过它！
它与领导有关。在这种情况下，“领先”与“床上用品”押韵；该术语源自由铅制成的金属条。
在 1900 年代的大部分时间里，印刷都是通过热金属排版完成的。这个想法是你有一个单独的字母的模具，机器会把它们排列成你想要的单词和段落。将注入热金属墨水，然后将整个东西压入纸中以产生印刷品。
在这个世界上，您还可以使用铅条来增加每条线之间的距离。这些引线有不同的厚度，以允许不同的距离：
资料来源：creativepro.com
问题是，不管你的铅有多厚，第一行总是会打印在同一个地方。因此，就心智模型而言，间距一直被认为是“线下”。
line-height这与 CSS 中的工作方式略有不同。当您增加行高时，您将在每条线周围添加垂直填充，在顶部和底部之间分开。
现代设计工具继承了旧世界排版的惯例，因此我们最终遇到了差异。设计工具已经开始考虑这一点，但您的里程可能会有所不同。
如果您对这个主题感兴趣，Mattias Ott 在他关于领导力的博客文章中进行了深入探讨。
与其相信从设计工具获得的测量结果，不如自己进行测量！我最喜欢的方法是使用 MacOS 中的内置屏幕截图工具：
您可以使用键盘快捷键打开此功能cmd-shift-4。单击并拖动以绘制一个框，然后使用右下角的数字来测量距离。如果您松开鼠标，它会截取屏幕截图，或者您可以按Escape键取消它，以免桌面上堆满一堆图像。
其他操作系统没有内置这种东西，但我找到了一些替代品：Greenshot (Windows) 和ScreenRuler / KRuler (Linux)。
一定要测量模型和你的实现！根据需要进行调整，直到数字相同。并测量到实际字母的距离，而不是它们周围的一些虚构的盒子！
努力发现差异。安排你的窗口，使模型和你的实现并排，并寻找细微的差异。把它当作那些找不同的游戏之一。
还有像PixelSnap这样的工具。PixelSnap 是一种工具，可让您使用一系列高级工具快速轻松地测量屏幕上的几乎所有内容。它是付费软件，但您也许可以说服您的雇主为团队获取一些许可证！
设计系统
组织采用设计系统变得越来越普遍。设计系统是一套令牌、常量和组件，它们形成了一个供设计和工程使用的内聚系统。
在理想的世界中，您永远不必测量任何东西，因为间距会被标记化。设计师可以说“这个间隙是 4 级空间”，这将对应于您主题中的一些像素。
在实践中，这并不能解决设计工具和 Web 之间的一些差异。我使用过很多设计系统，但我仍然发现自己在做一些小的调整。
设计系统为构建提供了良好的基础，但在我看来，它们并不能完全解决问题。
