Question

我接受了代码挑战。我已经阅读并观看了一些关于如何操作的教程，并且遇到了很多关于这个＆＃34;工作流程＆＃34; PSD到HTML已经死了。

在我看来，通过HTML和CSS实现设计并不难，但是在没有非常具体的指示且缺乏实际经验的情况下仍然存在一些问题。在这个领域。这里有一些...

鉴于大多数网站都是响应式的，并且我认为这是对新网站的期望，您应该从字面上获取PSD图层的像素宽度和高度并给它们一个固定的宽度/高度吗？或者您应该使用其他方法，例如测量特定部分的相对宽度/高度（如百分比）？
什么时候适合或建议裁剪PSD的一部分并将其作为图像包含而不是用HTML / CSS自己绘制？

Answer 1

1。）确保该网站看起来应该在psd中查看。使用像bootstrap这样的工具，它很容易让它响应。固定宽度永远不会正常，除非您使用媒体查询根据窗口大小更改它们。但是，不要再重新发明轮子 - 像bootstrap这样的工具存在。利用别人的辛勤工作。

2。）永远不会。永远不能。建立一个网站最重要的部分是，所有人都可以访问它，每个元素都具有它应该具有的内容，即残疾人的alt和标题标签，这一点非常重要。同样重要的是，如果不是更多，那就是页面尽可能快地加载。 CSS样式和优化的图像（即使用1px bg图像并重复它，确保它是适合情况的图像类型等）加载方式快于在div中填充图像以使其看起来正确，加上图像无法以标记的方式响应。

显然这些主要是基于意见的，所以这个答案可能会被关闭。但真正的答案是，无论分辨率如何，都可以制作出适合所有用户的内容，并且不要懒惰并采取捷径。

Answer 2

1）我的建议是回应。用百分比替换在Photoshop中看到的每个静态元素。你怎么知道静态元素的百分比？你需要计算它。我举个例子，如果你的Photoshop网站的最大宽度为1000px，并且你有一个320px的列，你必须除以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创建图像时才裁剪和使用图像（例如，如果您需要添加徽标或其他位图相关图形）。

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

2 个答案: