css - （固定宽度）与（可变宽度）网站设计

Question

我正在学习如何设计一个网站。其中一个决定似乎是如何向用户呈现数据，即存在不同的显示器尺寸，是否将数据结构化以占据整个屏幕（又名 GMail）或使其固定宽度，即选择标准显示器尺寸（ 1024x768）并使其在所有显示器上看起来都相同（又名 StackOverflow）。

我倾向于可变宽度设计，我想了解的是这个设计决策对编程有什么影响？即，当我对具有可变宽度设计的网站进行编程时（具体来说——CSS 的使用），我必须记住什么？

Answer 1

无论如何，我都不是设计师，但我正在为我目前正在建设的自己的网站做设计。把我在下面说的所有东西都加几粒盐。

我认为你使用哪种宽度样式很大程度上取决于你拥有什么样的内容，以及它的伸展程度。

Gmail 实际上作弊（<div>当窗口宽度发生变化时，元素的宽度会在 Javascript 中重新定义），但原则上这种设计是可行的，因为侧边栏是已知数量并且动态内容包装得很好。这意味着他们可以以固定宽度放入侧边栏，然后使用边距确保中间的内容不会与这些侧边栏重叠。如果内容变得太大，它会简单地换到下一行而没有人关心，因为它通常是自由格式的文本。如果您的网站在其主要内容块中有很多内容，其中存在内容溢出其容器的真正危险，那么可变宽度可能不是正确的选择。有专家可以使这些类型的设计工作，但如果你刚刚开始，你可能不想尝试。我试过了，它只会让我很沮丧。

固定设计往往更容易。我把它比作在一张纸上画一个设计。基本上，您知道纸张的大小（因为您明确指定了它），所以当您绘制一个框时，您知道它不会与旁边的框重叠，因为您还知道您在哪里绘制了另一个框以及它要去哪里成为。您只是倾向于对最终在页面上呈现的位置有更绝对的控制。

需要注意的是，您需要注意您选择的字体大小并不总是使用的字体大小。用户可以更改浏览器使用的默认字体大小，使其比您预期的更大，从而使您的内容再次突破他们的框框。我倾向于解决这个问题的方法是经常使用我的浏览器文本缩放功能来测试设计，并确保当字体增加 3-4 倍时一切看起来都很合理。

至于选择您的“标准显示器尺寸”，现在的常见做法是将您的网站宽度定义为 960 像素，无论是给予还是接受。这对于 1024 像素宽度的视口来说大约是合适的尺寸，一旦您考虑浏览器 chrome（例如垂直滚动条）。如果您有很多用户可能仍使用 800x600 分辨率，请改用 760 像素设计。仍然有些建议确保您的关键内容适合 760 像素以防万一，并将剩余的 200 像素用于不太重要的内容。

希望那些对你有帮助。

Answer 2

在代码方面，如果您考虑一下，实际上并没有太大区别。我个人认为最好的方法是两者的结合：创建一个外包装，然后将其中的所有元素设置为百分比值。这样，无论您决定在最外面的包装上使用百分比还是固定宽度，内部总是会很好地缩放。

尽管我通常对最外层的包装器使用固定宽度，但我仍然使用百分比宽度对内部元素进行编码（无论如何，它们中的大多数，除了必须具有固定宽度的元素）。如果客户想要一个全宽的网站，只需更改一个值即可。

我认为最终，这只是个人喜好问题，无论是您的还是您的客户的。

希望这可以帮助。