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

时间:2010-11-05 11:30:13

标签: css user-interface fixed-width variable-width

我正在学习如何设计网站。其中一个决定似乎是如何向用户呈现数据,即存在不同的监视器大小,是否构建数据以占据整个屏幕(也称为GMail)或使其固定宽度,即选择标准监视器大小( 1024x768)并使其在所有显示器(又名StackOverflow)中显示相同。

我倾向于可变宽度设计,我想要了解的是这个设计决策对编程有什么影响?也就是说,当我使用可变宽度设计编程网站时,我需要记住什么(具体 - CSS用法)?

2 个答案:

答案 0 :(得分:2)

我不是一个设计师,但我正在为我自己正在建设的网站做设计。拿下我说的一切,加上几粒大块的盐。

我认为您使用的宽度样式在很大程度上取决于您拥有的内容类型以及它的扩展程度。

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

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

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

就选择“标准显示器尺寸”而言,现在常见的做法是将您的网站宽度定义为960px,给予或接受。一旦您考虑浏览器镶边(例如垂直滚动条),这大约是1024px宽度视口的正确尺寸。如果您有许多用户仍可能使用800x600分辨率,请使用760px设计。为了以防万一,我们仍然建议确保您的关键内容符合760px,并将剩余的200px用于不太重要的内容。

希望有所帮助。

答案 1 :(得分:0)

代码方面,如果你考虑它,真的没什么区别。我个人认为最好的选择方法是两者的结合:创建一个外包装,然后将其中的所有元素设置为百分比值。这样,无论您决定在最外层包装器上使用百分比还是固定宽度,内部都将始终很好地缩放。

虽然我通常使用固定宽度作为最外层的包装器,但我仍然用百分比宽度编码内部元素(大多数都是这样,除了必须具有固定宽度的元素)。在客户想要一个全宽度网站的情况下,只需更改单个值即可。

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

希望这有帮助。