(固定宽度)与(可变宽度)网站设计

3
我正在学习如何设计网站。其中一个决策似乎是如何向用户呈现数据,即在不同的监视器尺寸存在的情况下,是否将数据结构化以占据整个屏幕(即GMail),或者使其具有固定宽度,即选择标准监视器尺寸(1024x768)并使其在所有监视器上看起来相同(即StackOverflow)。
我倾向于采用可变宽度设计,我想了解的是这种设计决策对编程有什么影响?也就是说,当我使用可变宽度设计编写网站时(具体来说是CSS使用),我需要注意什么?

2
可能是重复的问题:流式网站还值得制作吗? - Yi Jiang
个人而言,我更喜欢固定宽度的网站,至少我知道在每个分辨率下它大致都是一样的 :) - Kyle
2个回答

2

我并不是一名设计师,但我正在为自己正在构建的网站设计。请注意,下面提到的所有内容都需要谨慎对待。

我认为你使用哪种宽度风格主要取决于你有什么样的内容以及它的拉伸程度。

Gmail实际上作弊了(<div>元素在窗口宽度改变时会重新定义它们的宽度),但原则上这种设计是可行的,因为侧边栏是已知的量,动态内容也很好地包裹。这意味着他们可以只插入一个固定宽度的侧边栏,然后使用边距来确保中间的内容永远不会与这些侧边栏重叠。如果内容增长过大,它就会简单地换到下一行,没有人会在意,因为它通常是自由格式的文本。如果您的网站在其主要内容块中有很多事情要做,在那里真正存在内容溢出容器的危险,那么可变宽度可能不是正确的选择。有专家可以使这些类型的设计起作用,但如果您刚开始尝试,您可能不想尝试。我尝试过,只会让我感到沮丧。

固定设计往往更容易。我把它比作在一张纸上画一个设计。基本上,您知道纸的大小(因为您明确指定了它),所以当您绘制一个框时,您知道它不会与旁边的框重叠,因为您也知道您绘制了其他框的位置和将要出现的位置。您只是倾向于更加绝对地控制东西最终在页面上呈现的位置。

这个注意事项是您需要意识到您选择的字体大小并不总是用于渲染。用户可以更改浏览器使用的默认字体大小,使其比您预期的更大,导致您的内容再次跑出他们的框。我通常通过使用我的浏览器的文本缩放功能经常测试设计,并确保当字体增加3-4倍时一切看起来合理。

至于选择“标准监视器尺寸”,现在的常见做法是将网站的宽度定义为960px左右。这大约是1024px宽的视口的正确尺寸,一旦考虑到浏览器chrome(例如垂直滚动条)。如果您有很多可能仍然使用800x600分辨率的用户,请使用760px的设计。建议确保您的关键内容适合760px,并使用剩余的200px用于不太重要的内容。

希望这能有所帮助。


0

就编码而言,如果您考虑的话,实际上并没有太大的区别。我个人认为最好的选择是将两者结合起来:创建一个外层包装器,然后将其中所有元素设置为百分比值。这样,无论您决定在最外层包装器上使用百分比或固定宽度,内部都会自动缩放适应。

虽然我通常使用固定宽度作为最外层包装器,但我仍然使用百分比宽度对内部元素进行编码(其中大部分元素是如此,除了必须具有固定宽度的元素)。如果客户需要一个全宽度的网站,只需要更改一个值就可以了。

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

希望这可以帮到您。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接