Question

我是一名平面设计师，我有一个小问题，我已经学习了一些css并在互联网上多次完成了HTML教程包，所以我有一个很好的html-css编码基础至少< / em>，我确实想开始将PSD webdesigns转换为HTML-CSS，我已经看过许多教程一步一步的指南等等。他们肯定有帮助，但我害怕很多点：

网站的灵活点，这意味着以下内容：我的显示器目前是1920x1080，假设我将编码网站以适应我的屏幕，并且屏幕小/大屏幕的人会打开网站，他会看到物体从原来的位置移动？因为据我所知，通过px定义测量以适合用户的监视器。

确保该网站至少可以使用3个浏览器，我知道每个浏览器都有自己的css基础阅读器，并且很难将网站设置为适合所有浏览器，尤其是Internet Explorer。

所以，我不需要特别的帮助，说实话，我需要的是一些要点/指导良好的教程，以确保我所评论的要点至少有50％被解决..

Answer 1

您所说的是响应式网页设计。直接在互联网上搜索它，你会发现大量的资源和博客。

我的提示是：

为了测试多个浏览器，请下载所有浏览器（Chrome，Firefox，Opera，IE）以及保存工作时（一直这样做）在所有浏览器中打开它，以便了解错误的来源
使用浏览器上的开发者工具。 Chrome和Firefox拥有非常好的开发者工具，可以帮助我解决我的问题。您还可以使用它来模拟移动浏览器并显示您的媒体查询（稍后解释）。
使用em而不是px。像素在屏幕上可能看起来不错，但如果用户屏幕很小，他们可能会发现很难阅读您的文字。这是一个很好的px到em转换器http://pxtoem.com/
使用百分比。例如，您可以使内容div的宽度为80％，这样屏幕两侧就会有一些空间（就像stackoverflow的设计一样）。这意味着您的内容可以很好地适应大多数桌面。另一个例子是导航栏，您可以将其设置为100％宽，以便无论桌面如何，它始终适合屏幕。
然后我们有媒体查询。这些允许我们根据屏幕大小更改内容。例如，当移动用户正在查看您的网站时，您可以使用媒体查询隐藏导航栏。以下是有关媒体查询的问题：http://cssmediaqueries.com/what-are-css-media-queries.html
有些人仍在为IE8开发，但这是一个痛苦的屁股。您需要决定您的受众是否将使用IE8。我猜你是一名图形设计师，你将会制作一个图形博客，这意味着你的观众可能会使用最新的浏览器。因此，如果您确实需要为旧浏览器开发，请考虑一下。

Answer 2

至于第一点：有一些现成的css框架，包括响应元素。我认为最受欢迎的是Twitter Bootstrap。它有a grid system来帮助您使html块更改其宽度甚至get hidden，具体取决于视口宽度。

如果您想了解这些技巧，可以研究媒体查询的工作方式。

关于跨浏览器的内容：您必须在要支持的所有浏览器中测试您的页面。这是规则。在你的路上，this link可能很有用。

Answer 3

网站的灵活点，意思是：我的显示器目前是1920x1080，让我们说我将编写网站代码适合我的屏幕和屏幕小/大屏幕的人会打开网站，他会看到对象从原来的移动放置？

解决这个问题的一般方法是建立一个居中的窗口，因此：

<html>
  <div id="container">
     <!-- your design lives here -->
  </div>
</html>

#container
{
  width:728px;
  margin: auto 0;
}

您的设计现在设置为728像素，适合大多数分辨率。您可以使用超出此范围的图形，请参阅SO顶部的栏，但您的内容应该位于此容器内。

另一个可能的解决方案是允许您设计为完全灵活并包含浮动的div中的所有元素，请参阅Masonry以获取有助于此的工具示例。

确保该网站至少可以使用3个浏览器，我知道每个浏览器都有自己的css基础阅读器，而且很难设置网站以适应所有浏览器，尤其是Internet Explorer。

这是每个网页设计师生活的一个bain。这里没有替代好的测试。有用的东西是像this one这样的CSS休息脚本。这将删除浏览器中的部分不一致性。但实际上你只需要再次测试和测试。

将PSD布局转换为HTML-CSS，它响应并适合所有显示器屏幕尺寸

3 个答案: