追逐像素-完美的梦想
我多年来一直在使用HTML和CSS进行构建，但我仍然不知道如何实现像素完美的设计。
如果您不熟悉这个术语，像素完美是指您的HTML/CSS实现应该尽可能接近原始样机。测量和间距应该精确到像素。
我经常听到这种担心；即使在多年的经验之后，许多前端开发人员也很难完美地复制设计。
当设计师递给我们一个完整的样机时，他们相信我们会忠实地实现他们的愿景。他们的工作是通过我们的实现来完成的，他们一直在祈祷我们不会在这个过程中太多地破坏他们的工作。
我们究竟如何生产出我们的设计师会引以为豪的东西呢？复制精确到像素的设计现实吗？为什么这件事这么难呢？
在这篇文章中，我们将回答这些问题，并学习一些技巧来帮助我们更接近像素完美的✨。
让我们先把这件事说清楚：从严格的法律意义上讲，我不认为像素完美实际上是可能的。
我们编写的HTML和CSS需要在各种令人眼花缭乱的设备上运行。有太多的变量会影响实现的呈现方式。
为了好玩，我在两台不同的设备上截取了完全相同的亚马逊列表的屏幕截图。
当并排查看时，这两张截图看起来非常相似，但当在它们之间切换时，很明显它们并不相同。它们包含非常不同的像素。
当我在DigitalOcean工作时，我能够参观他们的一个数据中心。它是狂野和超现实的；巨大的房间可以容纳数百排，每排都有几十个架子，每个架子上都有几十台电脑。每台机器都是一样的。
我有时会嫉妒后端开发人员。后台有很多棘手的问题，别误会我的意思，但至少他们控制着运行代码的设备！它不必运行在所有能想到的设备上，从5&34；部手机到72&34；台电视机，再到智能冰箱。
在上面的演示中，我只更改了两个变量：操作系统和浏览器。想想还有多少其他因素会影响绘画效果：
这是我刚刚想到的，我打赌你有几个我错过了！
因此，很明显，当涉及到屏幕上各个像素的RGB值时，我们永远无法确保100%的一致性。这是一个不可能达到的标准。但这也不是真正的意义所在。
没有人要求放大镜下的东西看起来是一样的。大多数情况下，设计者希望实现方式在肉眼上看起来近乎相同，并有明显的对准偏差和松散的鹅毛腿间距。他们希望它非常接近像素，而不是像素完美。
当你收到刚印好的新鲜样机时，通常会以某种设计工具(如Figma或Zeplin)的形式交付给你。
这些工具令人敬畏，因为与静态图像不同，它们是设计的活生生的表现形式。您可以选择单个元素并选择颜色和大小。
不幸的是，这些信息并不总是可信的！泽普林告诉你标题和段落之间有64px的差距并不意味着它是正确的。
像Sketch这样的工具从根本上说是设计工具；它们继承了设计界的一系列实践和特质，它们并不总是整齐地映射到网络上。他们肯定会很接近，但不一定足够接近。
不要相信你从设计工具得到的测量结果，你应该自己测量！我最喜欢的方式是使用MacOS的内置截图工具：
您可以使用键盘快捷键cmd-Shift-4打开此功能。单击并拖动以绘制一个框，并使用右下角的数字测量距离。如果你松开鼠标，它会截屏，或者你也可以按Esc键取消它，以避免桌面上乱七八糟的图片。
一定要测量样机和您的实现！根据需要进行调整，直到数字相同。并且测量到实际字母的距离，而不是他们周围的某个想象中的盒子！
努力找出不同之处。排列窗口，使模型和实现并排，并寻找细微差别。把它当做那种点对点、点对点的游戏。
还有像xScope xScope这样的工具。XScope有一系列巧妙的工具可以在屏幕上测量东西。这是付费应用程序，但您的组织可能愿意购买许可证！它比截图工具方法更容易使用，后者需要鼠标和大量的灵活性！
看看下面两个圆圈。你认为哪个居中位置正确？
第二个看起来更好，不是吗？然而，第一个问题在技术上是正确的。
在CSS中，一切都是盒子。数字1&34；会在它周围画一个方框，这个方框正好居中。
右侧的已移动，使其茎与垂直轴对齐：
这称为光学对准。它的排列是基于人的感知，而不是基于方框之间的绝对数学距离。
诚然，这是一个非常小的细节，如果数字是由数据驱动的，这就变得不切实际。但这是一个很好的例子，说明了数学居中并不总是让人感觉正确。有时，我们需要做一些小调整，这样我们的眼睛才能相信事情是完全一致的。
我经常发现自己需要像这样做一些微调。让我们看看另一个例子。在这两个选项之间切换，看看哪一个让你感觉更好：
这是标题下面的一段话。这一段有很多词，你可以想象它有非常重要的东西！
如果我们使用元素检查器，我们会看到内容框在版式左边缘之前有几个像素的空白：
令人高兴的是，导致这种差距的字距调整似乎在不同的浏览器呈现引擎中是一致的，因此我们可以安全地将内容移动几个像素以实现普遍改进的对齐。
需要说明的是，我知道这是非常微妙的。你可以在不做光学对准的情况下实现非常锐利的设计。我们现在是最后5%的区域。但它确实起到了作用，对于关键任务页面(主页、高流量登录页面)来说，花几分钟进行这些调整是值得的！
您可能已经注意到本文中的一个模式：为了让事情感觉正确，需要进行大量的小调整。
不停地移动东西会让人感觉很混乱。为了增加一些约束，并确保使用一致的策略，我喜欢为自己创建一个小的Reaction组件。下面是它的样子：
即使您不熟悉Reaction，希望这段代码能让您了解它在做什么。我们的ShiftBy组件允许我们沿任一轴移动几个像素。
我喜欢这一点，因为它的意图非常清楚；我们正在进行微小的调整，让人感觉一切都很协调。我们并不是在一堆已经存在的元素上随意地散布一些CSS，看起来似乎是随机的。
转换：翻译是我所知道的最不具侵入性的转换方式。与使用保证金不同的是，它不会把兄弟姐妹拉上车。
你会惊讶于这个组件经常派上用场。例如，我稍微切换到无序列表中的自定义项目符号：
将它们对齐到中心或基线感觉不太正确，所以我调整了几个像素，直到它们适合我的眼睛。
CSS是一种看起来很棘手的语言。它相对容易上手，可以调整排版样式和移动东西。但现实世界的项目从来都不是那么简单，事情很快就会变得复杂起来。
在这篇文章中，我们已经看到了小的调整是如何产生巨大的不同的，但我们根本没有讨论如何让这些小的调整发挥作用，让事情变得足够紧凑！？
我知道很多JS开发人员对CSS没有信心。他们理解语法，在应用风格上没有问题，但他们还无法弥合这一差距，无法熟练掌握；他们在进行大规模布局工作或提出可伸缩的体系结构时并不自在。
我正在学习一门名为《面向JavaScript开发人员的CSS》的课程，该课程名为《面向JavaScript开发人员的CSS》。这是一门多形式的课程，利用我在这篇博客上使用的相同技术来构建动态和交互式的小工具，我将把它提升到一个全新的水平。
如果你想更舒服地使用CSS，我想它真的会很有帮助！了解有关该课程的更多信息了解有关该课程的更多信息。
在这篇文章中，我们谈了很多关于技术方面的事情。但这还有另一个方面。
我以前写过，与设计建立良好的工作关系对于做伟大的工作是绝对必要的。如果你还没有读过，你应该去看看；我认为这是我发表过的最有影响力的博客帖子之一。
事实是，有时候我们作为前端工程师的经验是有价值的。例如，设计者可能对一个漂亮的<；Select>；元素有一个很好的想法，并希望它是像素完美的…。但它们的设计不会像本机表单控件那样易于访问。有时，平台默认设置比自定义用户界面元素更可靠，我们的工作就是倡导它们。这需要良好的工作关系！
当设计师要求移动一些像素时，不要称它们为nits。我不想让别人给我的作品贴上这样的标签！设计师们常常为让我们负担他们的要求而感到难过，而实际上，这往往是我们的错，因为我们从一开始就把球搞砸了！
如果你曾经试图从头开始设计一些东西，你可能会发现这很令人沮丧；你可以选择和Airbnb这样的产品一样漂亮的颜色和华丽的字体，但最终得到的东西看起来既业余又不专业。
在我最初的一份工作中，我们买了一个看起来很漂亮的模板，但在实现了几个定制功能后，它看起来很粗糙。我们没有改变那么多；为什么看起来更糟了？？
事实是，当涉及到间距和一致性时，设计往往是相当脆弱的。如果你把一些东西移开，整个东西就会像纸牌屋一样坍塌。
这就是为什么这些东西很重要。这不仅仅是为了安抚你团队中的设计师。如果你要采访用户，我怀疑没有人能够清楚地表达这些东西。没有人称赞元素周围的一致间距！然而，它产生了影响。
大多数人看不到那种程度的东西。他们会完整地看一页，然后根据感觉做出判断。要么感觉良好和专业，要么感觉糟糕和马虎。
我的搭档的弟弟是一个典型的网民，他是一名音乐专业的学生，对设计或开发不感兴趣。我曾经就我正在做的一件事征求他的反馈，他说这件事看起来很“真实”。大多数成功的在线企业都是经过精心设计和周密实施的；如果你的企业不是这样，它就不会显得合法。良好的执行有助于建立可信度。
仅仅几个像素的变化并不能决定一个网站的成败，但它会累积起来。这是一个千篇一律的剪纸领域；总的来说，这些东西产生了巨大的不同。
平台的差异使得它不可能达到真正的像素完美，但在实践中，这并不是什么大不了的事。我们不能保证万能的一致性，但我们可以确保每一次体验都是内在一致的，并且忠实于设计的精神。这是最重要的。