我纯粹是从可用性的角度问这个问题:当您调整浏览器窗口大小时,网站是否应该扩展/拉伸以填充查看区域?

我确信存在明显的缺点:

  • 宽栏文本难以阅读
  • 使用百分比编写 html/css 可能很痛苦
  • 如果图像太宽,或者添加的文本块太长,您的设计就很容易超出其限制。(看到编写 html/css 代码很痛苦)

我能想到的唯一优点是,使用浏览器内置的字体调整功能的用户不必处理只有几个单词长且两侧都有空白的列。不过,我认为这可能是浏览器问题(Firefox 3 允许您缩放) 一切 而不仅仅是文本,它一直都很方便)

编辑:我注意到堆栈溢出是固定宽度的,但编码恐怖会调整大小。杰夫似乎对这两种方式都没有强烈的偏好。

有帮助吗?

解决方案

原始 HTML 就是这样做的。您是否正在更改数据,使其在随机大小的窗口中呈现得不太好?

在过去,每个人都有 VGA 屏幕。现在,这个决议是最不常见的。谁知道未来会出现哪些常见的决议?为什么需要一定的最小宽度或高度?

从可用性的角度来看,要求用户采用某种分辨率只会给不使用该分辨率的人带来降级的体验。由此而来的另一件事是 固定宽度?我见过很多固定大小的窗口(弹出窗口),但它们无法正确渲染,因为我的字体与设计者的字体不同。

其他提示

在网站缩放方面,我喜欢固定大小的网站,可以使用浏览器的“缩放”功能很好地缩放。我不想在我的 1920 分辨率显示器上看到一个很宽的页面和很小的字体。我不知道网页设计师是否需要做一些事情来使其在缩放时能够很好地缩放,但是 FF3 中的缩放很棒,IE7 中的缩放毫无用处......

设计应该在合理的范围内保持流畅。

使用CSS有 min-widthmax-width 属性(适用于所有浏览器,包括 IE7+)以防止设计过度拉伸。

重要的是永远不要让文本块拉伸得太宽。如果窗口展开,则任何文本块都不应无限延伸以匹配,因为阅读会变得困难。

正如人们所说,这实际上取决于网站显示的信息。StackOverflow 和 Google Images 是两个很好的例子。

如果 stackoverflow 拉伸以适合屏幕,则较长的答案阅读起来会很烦人,因为眼睛很难扫描长行 - 这是 确切地 为什么报纸的所有内容都使用分栏,以及为什么书籍的宽度都是相同的。

对于 Google 图片,其内容基本上是一堆 200 像素宽的图像,它会拉伸以适应浏览器宽度,并且仍然完全可读。

基本上,请记住,眼睛讨厌阅读长行文本,并以此为基础进行设计。您可以设计您的网站,以便当您增加字体大小时,所有布局都能很好地缩放(我能想到的唯一这样做的网站是 www.geektechnique.org - 按 ctrl and -/= 或者 ctrl+scrollwheel, ,并且布局随着字体大小改变宽度)

我想喜欢很多东西:这取决于。我通常两者都做。有些内容保持固定宽度是为了看起来更好,或者如果它不能从更多空间中受益。其他东西如果看起来有用的话设置为 100%。

这应该根据您网站设计的复杂程度来决定。更复杂的图形或组件(内容 div 的数量)将决定您的网站的扩展程度。一般来说,您会发现大多数图形设计师网站都无法扩展,因为它们是图形密集型的。然而,信息网站将进行扩展,以充分利用屏幕上的可读空间,并且并不复杂,易于使用。这确实是一个偏好问题。

我认为这取决于网站的内容。像 SOFlow、论坛和其他网站这样的网站都强调阅读大量细节,因此在我看来,拥有更多的空间来这样做是一个很大的好处。垂直滚动越少越好。

然而,对于阅读水平要求不高的网站,甚至是仅展示单个产品的博客或零售网站,固定宽度可以使内容更加简洁。

我非常喜欢全流体设计。至于对文本行太长的可用性的抱怨......如果由于浏览器窗口的大小而导致它们太长,那么我可以轻松地使窗口变窄,就像使窗口变宽一样。

笔记:如果您在浏览器中使用缩放功能,固定布局会挤压文本,而流体布局则允许文本占据整个屏幕。

也许这只是一个浏览器问题,但这绝对是支持流畅的论据

段落宽度大于显示屏会使网站完全无法使用。您必须为您阅读的每一行来回摇动水平滚动条。我在大学修读网页设计课程,教科书上称之为适应屏幕宽度的设计 流体布局.

我正在使用流体布局设计我的大型课程项目,这比固定宽度麻烦一点。我怀疑其他学生都不会使用它,标记者也不会注意到,而且我们正在模仿的专业网站也不是流畅的。

我想说一直都是液体。 如果用户不喜欢放大窗口的结果,他总是可以返回到较小尺寸的窗口,但他无法对固定布局做任何事情。

如果您真的非常讨厌您的网站因为大屏幕用户所做的事情而显得丑陋,那么至少为了所有真​​实而美丽的事情 切勿使用基于像素的固定布局! CSS 具有这些简洁的文本相对大小单位,例如“em”,允许页面的某些部分随字体大小缩放,而其他部分(如图像)保持其“自然”大小。

为什么不使用它们并让您的页面缩放良好,而不依赖于 FF3 不太灵活的“缩放所有内容”,这实际上只是使用基于愚蠢的基于像素的固定布局的网站的解决方法?

很多人在说“这是一个品味问题”或“我不喜欢我的高像素显示屏上的大字体”之类的话。像素的数量与它无关,这不是品味问题。这是DPI的问题,它与显示分辨率和字体大小直接相关。如果您的布局随着字体的 DPI 一起缩放(例如,通过以 em 指定,并使用 SVG),那么您最终会得到非常漂亮、非常清晰的网站,可以在任何显示器上以最佳方式工作。

http://www.boutell.com/newfaq/creating/anyresolution.html

这是风格偏好的问题。根据实施情况,两者可以同等使用。如果屏幕足够宽,也可以使用列。就我个人而言,当屏幕上出现一列狭窄的文本时,我觉得很烦人。


2012年编辑:是的,您的网站应该响应它所显示的窗口的大小。

有很多地方可以阅读更多相关内容,包括:

固定设计和流动设计之间可能存在折衷设计。您可以设计一个类似流体的网站,但设置 css 属性 max-width 到 1024(或其他)。这意味着当 window width 小于 1024 并且 fixed width 当它更大时。

然后,窄屏幕用户(例如我的 800 像素 eee 701)不必转动水平滚动条来阅读每一行,而宽屏幕用户(不知道如何调整浏览器窗口大小)则不必获得 500 个字符宽, 1 个字符高的段落。

许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top