（固定宽度）vs（可变宽度）网站设计

Question

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

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

Answer 1

我不是一个设计师，但我正在为我自己的网站做一个设计，我目前正在建造。把下面所说的一切用大量的盐加以说明。

我认为你使用哪种宽度的风格在很大程度上取决于你有什么样的内容以及它的舒展程度。

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

固定设计更容易。我把它比作只是在一张纸上画一个设计。基本上，你知道纸张的大小（因为你明确地指定了它），所以当你绘制一个盒子时，你会发现它不会与它旁边的盒子重叠，因为你也知道你在哪里画出另一个盒子并将它放在哪里成为。你只是倾向于更加绝对地控制事物最终在页面上呈现的位置。

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

就选择您的“标准显示器尺寸”而言，现在常见的做法是将您的网站宽度定义为960像素。这是关于一个1024像素宽度的视口的正确大小，一旦你在浏览器镶边（例如垂直滚动条）。如果有许多用户仍然可能使用800x600分辨率，请改为使用760像素的设计。仍然有人建议您确保您的关键内容适合760像素以防万一，并将剩余的200像素用于不太关键的内容。

希望能有所帮助。

Answer 2

在代码方面，如果您仔细考虑，其实并没有太大的区别。我个人认为最好的选择是两者的结合：创建一个外部包装，然后将其中的所有元素设置为百分比值。这样，无论您决定在最外层包装上使用百分比还是固定宽度，内部总是可以很好地缩放。尽管我通常对最外层的包装使用固定宽度，但我仍然使用百分比宽度编码内部元素（大多数是反正，除了必须具有固定宽度的元素外）。如果客户想要一个全宽网站，这只是一个改变单一价值的问题。

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

希望这会有所帮助。