像素完美设计：如何创建一个看起来与 PSD 模板一模一样的网站 [关闭]答案

【问题标题】：Pixel Perfect Design: How To Create A Website That Looks Exactly Like The PSD Template [closed]像素完美设计：如何创建一个看起来与 PSD 模板一模一样的网站 [关闭]
【发布时间】：2019-01-08 10:23:04
【问题描述】：

我正在开展一个项目以提高我的 HTML/CSS 技能。我下载了一个随机的 PSD 文件，并将其转换为 HTML/CSS。我希望尽可能接近 PSD，因为 Pixel Perfect 对招聘人员来说是强制性的。我的意思是像素完美，接近设计而不是浏览器兼容性。

为了实现这一点，我使用了一个名为“PerfectPixel”的 chrome 扩展。我可以将网站的图像放在顶部并将其与我的工作进行比较。出于某种原因，我总是偏离一两个像素，似乎无法完美匹配图像。有时甚至 PSD 文件中的测量值也有偏差，所以没有帮助....

这是否发生在你们中，还是我必须更加努力？

PS：如果某处有这方面的教程，请将链接发给我，因为我想提高我的前端技能。

【问题讨论】：

渲染 html 总是会与实际的 psd 有点不同。我认为如果像素有轻微变化是完全可以的
并非对所有招聘人员来说像素完美都很重要。更重要的是，如果您使用PerfectPixel 之类的工具，有时当您两次截取同一页面并将一层放在另一层上时，即使不应该显示像素差异，它仍然会显示像素差异。我认为你应该关注响应能力和兼容性（你永远不知道招聘人员有什么分辨率或使用什么浏览器）。它比像素完美更好，因为在极少数情况下您正在创建像素完美的网站。
@CodeMeNatalie 很好的解释+1

标签： html css psd pixel-perfect

【解决方案1】：

首先，目前 Photoshop 在网页设计中的使用越来越少。我会尝试找到一个好的 Sketch 或 Adobe XD 文件并使用它。在这些程序中，更容易看到不同元素的测量值，并且您更有可能在实际设计中找到这些程序。

解决“像素完美”设计：在我看来，首先学习编写好的代码（如果你还没有）比让你的设计像素完美更好。此外，大多数公司寻求的网页整体外观与设计中的外观相同，而不是每个元素都具有完全相同的尺寸。

此外，对于响应式设计（您绝对应该这样做），大多数情况下您只能获得几种不同尺寸的屏幕设计（通常每个用于移动设备、平板电脑和台式机），并且必须弄清楚它们之间的过渡你自己。在那种情况下，不可能做到“像素完美”。

【讨论】：