html - 像素完美设计：如何创建一个看起来完全像 PSD 模板的网站

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

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

这是否发生在你们中的一些人身上，还是我必须更加努力？

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

标签： htmlcsspsdpixel-perfect

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

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

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