html - 像素完美设计 : How To Create A Website That Looks Exactly Like The PSD Template

标签 html css psd pixel-perfect

<分区>


想改进这个问题吗? 更新问题,使其只关注一个问题 editing this post .

关闭 4 年前

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

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

这是否发生在你们中的某些人身上,还是我必须更加努力地尝试?

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

最佳答案

首先,目前 Photoshop 越来越少地用于网页设计。 我会尝试找到一个好的 Sketch 或 Adob​​e XD 文件并使用它。在这些程序中,可以更轻松地查看不同元素的测量值,并且您更有可能在实际设计中找到这些程序。

解决“像素完美”设计:在我看来,最好先学习编写好的代码(如果您还没有),而不是让您的设计像素完美。此外,大多数公司都希望网页上的整体外观与设计中的外观相同,而不是每个元素都具有完全相同的尺寸。

此外,使用响应式设计(你绝对应该这样做),大多数时候你只会得到一些不同尺寸的屏幕设计(通常是移动设备、平板电脑和台式机各一个)并且必须弄清楚它们之间的转换你自己。在那种情况下,不可能做到“像素完美”。

关于html - 像素完美设计 : How To Create A Website That Looks Exactly Like The PSD Template,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54089744/

上一篇:css - 生产开发模式 CSS 不匹配

下一篇:javascript - 如何知道一个元素是否对用户可见?

相关文章:

html - 如何显示 PSD 文件到 CSS 的精确距离?

jquery - 这段贴在顶部导航栏上的代码有什么问题?

javascript - 为什么JS不在滚动时调用函数?

css - 对网站进行更改

html - IE 10 中的 Z 索引

html - 所有元素均固定在figma设计中

image-processing - 在 web 中实现 PSD 处理(如在 social6.com 中)

javascript - angularjs中的ng-include抛出错误

javascript - 在 HTML 中创建循环以自动从目录加载图片

javascript - 谷歌语音识别搜索文本问题