当有人给你一个 PSD 并告诉你把它转换成网页时

Question

我收到了一个代码挑战来做到这一点。我已经阅读并观看了一些关于如何做到这一点的教程，并且遇到了很多关于 PSD 到 HTML 的“工作流程”是如何死的。

在我看来，使用 HTML 和 CSS 实现设计并不难，但在没有非常具体的指导且缺乏该领域的大量实践经验的情况下，当分配此任务时，肯定仍有一些问题挥之不去。这里有一些...

1. 鉴于大多数网站都是响应式的，我认为这是对新网站的期望，您是否应该按字面意思理解 PSD 图层的像素宽度和高度，并给它们一个固定的宽度/高度？还是应该使用其他方法，例如测量特定部分的相对宽度/高度（如百分比）？

2. 什么时候适合或建议裁剪 PSD 的一部分并将其作为图像包含，而不是自己使用 HTML/CSS 绘制？

Answer 1

1.) 确保网站看起来应该在 psd 中显示。使用诸如 bootstrap 之类的工具，可以很容易地使其响应。除非您使用媒体查询根据窗口大小更改它们，否则固定宽度永远不会好。但是不要再重新发明轮子了——像 bootstrap 这样的工具是存在的。利用别人的辛勤工作。

2.) 从不。永远不能。构建站点最重要的部分是所有人都可以访问它，重要的是每个元素都具有应有的功能，即残障人士的alt和title标签。同样重要的是页面加载速度尽可能快。 CSS 样式和优化的图像（即使用 1px bg 图像并重复它，确保它是适合该情况的图像类型等）加载方式比仅仅在 div 中塞满图像以使其看起来正确，再加上图像更快无法像标记那样响应。

显然，这些主要是基于意见的，所以这个答案可能会被关闭。但真正的答案是做一些不管分辨率如何都很好用的东西，适合所有用户，不要偷懒，走捷径。

Answer 2

1) 我的建议是积极响应。用百分比替换您在 Photoshop 中看到的每个静态元素。你怎么知道静态元素的百分比？你需要计算它。我给你举个例子，如果你的 Photoshop 网站的最大宽度为 1000 像素，而你有一个 320 像素的列，你必须除以 1000/320 = 32%。

另外，始终以“移动优先”的态度开始，这意味着您应该从小到大构建网站，以便更复杂的样式仅在较大的屏幕尺寸上可见，这样您就不会混淆移动用户.学习使用EM 和REM 单位而不是像素（请注意，IE8 不支持REM），这将使您能够在将来想要更改网站时轻松扩展您的网站。

超级重要： 将box-sizing: border-box 应用于页面中的所有元素，这将使您的生活变得轻松，因为如果您将填充或边距应用于元素，它不会大于百分比你已经指定了。

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}   

2) 很简单。仅当您 100% 确定无法使用 CSS 创建图像时（例如，如果您需要添加徽标或其他与位图相关的图形），才可以裁剪和使用图像。