这是一个很有意思的话题，仅从标题中我们可以得到两个关键词 完美 和 缩放。对于 Web 前端开发者而言，特别对于 UI 还原方面（天朝称“切图”，国外称“UI Developer”）更多追求的是像素级还原（即“Pixel-Perfect”），但随着更多的移动终端出现之后，特别更多的业务重心放到移动端之后，Web 开发者把更多的重心放在移动端。为此在业内出现了更多有关于移动端适配的方案，比如 Rem适配 和 VW适配 等。但这些都离我们所说的像素级还原目标越来越远。换句话说，如果我们既要（像素级还级）又要（完美缩放或适配），该怎么办呢？如果你对该话题感兴趣，那么接下来的内容值得你花一定时间阅读。

我们先从像素级还原聊起！

像素级还原的故事

不知道你听到“像素级还原”这个词是什么时候？

老一点的前端或者说曾经有过“重构工程师”称号的前端一定听过这个词，即，像素级还原或100%还原。或许时至今日，你在工作中还会因为一个像素的偏差和设计师争得面红耳赤，甚至会因为这一个像素不欢而散。说实话，不同的角色站在不同的角度为这一个像素而争都是对的：

• 设计师：希望自己设计出来的作品呈现给自己用户时完全不打折扣
• 开发人员：不是我不想像素级还原，而是很多时候也是无耐

换句话说，都是“打工人”，都不容易。暂且抛开这些恩与怨，先来看看什么是像素级还原。

什么是像素级还原

“像素级”这个概念是由设计师和客户一起创造出来的，因为他们要求自己的设计稿必须反映出设计，并且要和设计一模一样。当设计师把完成的设计稿交给前端开发人员时，他们相信前端会完全不打折扣地实现他们的设计。他们的工作是通过Web前端的实现来完成的，他们希望Web在实现过程中不要损坏他的设计稿：

而设计稿最终要在浏览器（或客户端）中向用户呈现，因此最终像素级还原（设计师的意图）转嫁到前端中：

指在HTML和CSS能100%的实现设计稿的效果，一个像素也不差。

我也经常听到这样的担忧：

许多Web前端开发人员难以完美再现一个设计，即使是有多年前端经验的Web开发者。

对于Web开发者来说，很多时候他是无辜和无耐的，即使在Web开发时严格的按照设计师提供的设计稿进行还原，精确的字号，准确的间距等，但最终实现出来的总是有一定差异的，比如下图：

看上去似乎是一样，但我们将其叠加到一起，就能看到它们之间的差异：

换张动图可能会看得更清楚一些：

你可以使用浏览器的插件PerfectPixel来验证自己的还原是不是达到了像素级还原。

而这种结果很容易被认为是不完美（不是像素级）的还原。

Ahmad Shadeed 分别在《The State Of Pixel Perfection》和《Comparing Design Mockups To Code Result》 围绕着像素级还原做了详细地阐述！

那么在现实中，像素级的还原是否就是完美的呢？

先把这个问题说清楚。从严格意义上来说，个人认为完美的像素级还原是不可能的。因为Web开发人员在编写HTML和CSS需要在各种设备终端上运行，而时至今日，这些终端设备足以让我们感到眼花缭乱。换句话说，将有很多的变量会影响我们编码出来的Web页面渲染。比如将淘宝PC端在Chrome和Safari浏览器中效果截取出来，并且并排在一起看时，这两张截图似乎非常相似，没啥问题：

但将他们合在一起看时，差异就立马显现出来了：

上图只是其中一个变量的差异（同一系统下不同的两个浏览器）。想想，现实中还有多少因素会影响到Web页面的，比如:

• 设备类型（台式机电脑、笔记本电脑、平板电脑、手机、手表等）
• 屏幕（或视窗）大小
• 屏幕像素密度（比如Retina屏幕和非Retina屏）
• 屏幕技术（比如，OLED、LCD、CTR等）
• 用户的操作（比如用户对屏幕进行缩放、调整默认字号等）
• 性能（比如，设备硬件、服务器负载、网络速度等）
• 设备色彩样正（比如夜间模式，iOS的暗黑模式等）

这仅是我能想到的，还有很多我想不到的呢？也就是说，我们永远无法确保屏幕上单个像素的RGB值百分百的一致。这是一个不可能的标准。但这也不是真正的重点。

另外，也没有人要求东西在放大镜下看起来是一样的。大多数情况下，设计师希望实现的东西看起来和肉眼一样（像素眼除外），并且收紧明显的错位和松散的间距。他们希望它是像素般接近的，而不是像素般完美的。

没有像素级还原就不完美？

前面两个示例都向大家展示了，Web开发人员在还原设计师提供的设计稿时，总是会存在差异，而且影响这方面的差异的因素非常地多。而这种效果在设计师眼里很容易被认为是不完美的。那么在现实中，它是否真的不完美？

在回答这个问题前，我们把时间拉回十年前。

在2010年，设计师或客户要求前端在还原设计稿时应该是一个像素级还原，这对于Web开发人员可能是可以做到的。因为在那个年代，Web在呈现的终端设备类型毕竟不多，大多在PC台式机上展示，笔记本也不多，更不用说现在这么多的移动终端设备了。Web开发者要考虑的屏幕尺寸数量也不多。简单地说就是PC页面尺寸，比如大家熟悉的960px宽度，或者后来的1024px宽度已经足够用了。然而，随着成千上百万的设备（智能手表，智能手机，平板电脑，笔记本电脑，台式机，电视等），像素级还原将不会是件易事，甚至是不可能的事情了。

这样的话从一名Web开发者口中说出，并不代表说Web开发者没有匠心精神，没有追求。

最近看一个新词“看（外观）和感觉”。放到我们Web设计中来看，“看（外观）”指的是从UI的角度看，一个Web网站的外观如何；而感觉主要是从Web功能和交互性的角度看。

我截了两张图：

上图是截取于Youtube首页，两者不同之处只是我在第二张图上对几个地方的颜色做了些许的调整。如果不专注看的话，这些小小的变化或许就把你忽悠了。感觉上两者并没有差异。

我们再来看另一张图：

左图是原始设计图；右图是Web前端开发出来的页面效果！

你可能已经发现两者之间的差异了吧，而且差异不小，这些差异显著影响了最终结果。上图展示的只是其中一个组件，这些差异只影响了一个卡片组件。或许有人会说这些差异很微小，并不重要，至少没有影响到功能和用户的交互。或许对于一个单一的组件，这样说法是对的。试想一下，如果所有组件都有一点或一些小差异，又将会是什么样的结果。

最终你将实现一个不完美的结果！

作为设计师，他们不可能忽略这些（间距、尺寸和对齐等）差异。这也是为什么在我们开发中存有视觉走查这样的一道生产流程：

我想你也经历过这样的过程！

作为Web开发者而言，要修复这些差异很容易。然而，Web开发人员还原出来的结果和设计稿存有差异却有诸多原因，而这些原因会因不同的原因而不同。比如：

• 懂不懂设计
• 有没有足够的项目开发时间
• CSS方面能力怎么样
• 是否注重细节

简而言之，不管是什么原因，我始终不认为开发者不知道如何修复还原出来的差异，让最终效果更接近原始设计稿（达到设计师诉求）。对于我来说，我认为每个Web开发者都有一个思维模式。当开发者有一定的设计知识（或能力）的时候，你会发现还原出来的Web页面结果在差异性方面就会小很多；反之，如果Web开发人员对设计方面一点都不懂，那么还原出来的结果和设计稿相比就会差得比较大。

似乎要让 UI 完美的像素级还原并不仅仅是按照设计稿完成UI页面即可，这里面还会涉及到很多和设计相关的话题，但这方面的话题并不是我们今天要讨论的。即使如此也不一定就能完美的像素级还原，因为和我们采用的技术方案也有着紧密的联系。比如说，我们针对移动端采用的布局方案，比如说现在业内比较热门的两种移动端布局方案，即 Rem适配 和 VW适配 。

说实话，这两种布局方案的基本原理都是根据视窗宽度动态调整CSS值，即可对UI界面的缩放。为此，我们再花点时间来说 UI 缩放相关的话题。

UI 界面的缩放

简单地说， Rem适配 和 VW适配 聊的都是通过 UI 缩放的原理让 UI 界面适配各种不同的移动终端。这两种布局方案的基本原理都是根据视窗宽度动态调整CSS值，事实上，在小站上有关于根据视窗宽度动态调整 CSS的文章还有很多，比如：

• CSS中的动态计算
• 聊聊min()，max()和clamp()函数
• 给CSS加把锁

不过，这些文章中提到的相关技术方案都是使用 相对的 CSS 单位和无单位值 来实现动态缩放（根据视窗宽度进行缩放）。 但这些方案都有一个共同的致命点，失去了像素的完美性，而且一旦屏幕低于或高于某个阈值，通常就会出现布局的移动或文字内容的溢出。

但是，如果我们要真要实像素级的完美还原 UI 呢？比如说，我们现在所采用的 VW 适配方案，只适合于移动的手机终端，换到平板或PC设备的时候，就会给用户带来不好的体验，而且还不能像 REM布局方案，在宽屏幕时让其在屏幕中水平居中。或者说，如果你要制作一个屏幕展示的数据图表，并且可能在不同的终端上浏览（比如超大的屏幕，会议室电视，老板的平板或手机终端），那又应该怎么办？简单地说，这一切让我们需要更精确的还原。

也就是说，如果我们想统一扩展设计，又该怎么办？当然，我们可以根据文本所涉及的可用宽度，用 CSS 变换来缩放内容。这样，正确的比例就被保留。

然而，我们也可以使用 CSS 中的 px（像素）单位值来实现流体比例缩放的 UI。它们根据设备的屏幕空间进行适当的缩放，同时保留其像素级的完美比例。此外，对于开发者而言，使用像素值更易于和设计相匹配，开发体验也更强。

如何像素级完美还原一个可具缩放的 UI 界面

接下来将以 Georgi Nikoloff 在 Codepen 上写的一个案例为例：