<分区>
标签 html css psd pixel-perfect
我正在从事一个元素以提高我的 HTML/CSS 技能。 我下载了一个随机的 PSD 文件并将其转换为 HTML/CSS。我想尽可能接近 PSD,因为 Pixel Perfect 对招聘人员来说是强制性的。我所说的像素完美是指接近设计而不是浏览器兼容性。
为了实现这一点,我使用了一个名为“PerfectPixel”的 chrome 扩展。我可以将网站的图像放在顶部并将其与我的作品进行比较。出于某种原因,我总是偏离一两个像素,而且我似乎无法完美匹配图像。即使是 PSD 文件中的测量值有时也会偏离,所以没有帮助....
这是否发生在你们中的某些人身上,还是我必须更加努力地尝试?
PS:如果某处有这方面的教程,请将链接发给我,因为我想提高我的前端技能。
最佳答案
首先,目前 Photoshop 越来越少地用于网页设计。 我会尝试找到一个好的 Sketch 或 Adobe XD 文件并使用它。在这些程序中,可以更轻松地查看不同元素的测量值,并且您更有可能在实际设计中找到这些程序。
解决“像素完美”设计:在我看来,最好先学习编写好的代码(如果您还没有),而不是让您的设计像素完美。此外,大多数公司都希望网页上的整体外观与设计中的外观相同,而不是每个元素都具有完全相同的尺寸。
此外,使用响应式设计(你绝对应该这样做),大多数时候你只会得到一些不同尺寸的屏幕设计(通常是移动设备、平板电脑和台式机各一个)并且必须弄清楚它们之间的转换你自己。在那种情况下,不可能做到“像素完美”。
关于html - 像素完美设计 : How To Create A Website That Looks Exactly Like The PSD Template,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54089744/