我注意到越来越多的网站采用固定宽度的布局,在这种情况下,调整浏览器窗口的大小只会导致出现滚动条,而在灵活的布局中,调整浏览器的大小会使页面的各个组成部分“收缩” 。
像这样的StackExchange网站就是固定布局的一个示例。 GMail和iGoogle是灵活布局的示例。选择一个而不选择另一个的原因是什么?

#1 楼

使用可变宽度的布局可能很难实现更复杂的设计。因此,我想这起了作用。

还有一个事实,就是阅读非常宽的文本并不舒服。 StackExchange网站上的列大小非常易于管理且易于阅读。使用可变宽度的布局,您不能仅将主要文本主体扩展到无法辨认的范围内。甚至Google也限制了其搜索结果的宽度。使用所有可用空间。

评论


+1为文本阅读宽度点。显示器的宽度是否为1680像素都没关系-您不会看到报纸在整个页面宽度上放置文字。

–theotherreceive
2010年7月29日在10:12

#2 楼

对于复杂站点,开发人员更容易解决此问题。同样,大多数固定宽度的站点将在1000像素左右。原因是只有1%的浏览器使用800x640,而0%的浏览器使用640x480。在此处查看最新统计信息。但是,这不包括移动设备。这是完全不同的球类游戏。

可变宽度布局的价值在于,它使人们可以在未最大化的窗口中轻松使用网站。

来查看您的听众并根据您认为他们想要的体验以及是否可变宽度比其他必须进行可变宽度开发的其他功能更重要来做出决定。

评论


您能否举一个无法在可变布局中使用的功能的示例?

– BenV
10年7月28日在16:58

并不是说功能不适用于可变布局。这是因为您必须管理页面的各个部分如何处理彼此移动,因此您必须花费更多的时间测试和开发可变宽度的布局。

–本·霍夫曼
10年7月28日在17:36

啊,我误解了你的最后一句话。我现在知道了。

– BenV
10年7月28日在19:23

某些可变布局的一个问题是,它们没有为主要内容设置最小宽度,因此,如果您的窗口太窄,则会将文本压缩到一个非常狭窄的列中,从而很难阅读。固定宽度的布局在硬编码宽度而不是最大宽度时会遇到相反的问题,并且如果不水平滚动就无法读取主要文本。

– Marius Gedminas
2010年7月28日在21:03

#3 楼

在两者之间存在一个折衷,即您设置最小宽度和最大宽度(使用CSS),然后使用百分比宽度使其余部分在两个极端之间流动。例如,您可能希望左侧菜单栏的宽度不超过200像素,但要使主要内容流动。这种技术使您的网站可以扩展到访问者的分辨率,而不会在极高分辨率或极低分辨率下显得愚蠢。毕竟,HTML被设计为可流动的-它是一种标记语言,而不是与print相同的方法。文字信息。确实,我在自己的个人网站上使用它。毕竟现在很多人都拥有宽屏或高分辨率的显示器了-我的工作显示器是1680像素宽-那么为什么他们会失去大量的房地产并且仅仅因为设计师决定了适合他们的固定宽度而不得不水平滚动屏幕?最终,良好的设计旨在为用户提供最佳的体验-不仅仅是在设计师的显示器上看起来“漂亮”的东西。

#4 楼

您可能不必做出选择。 List Apart在响应式设计方面有出色的文章。主要思想是可以使用媒体查询来捕获浏览器窗口或视口大小的更改,并根据需要重新分配CSS。那里有很多书可供阅读,因此请查看文章以了解所有多汁的细节。但是对于它的长短来说(或者应该是它的“宽而窄”?)请看一下示例前后的页面。前一页可以很好地扩展到某个点,但是如果将其缩小得足够窄,它会有些笨拙。后页也可以缩放,但是当您将其设置得太窄而无法正常工作时,它也会更改布局。

#5 楼

根据Jakob Nielsen的113版《首页可用性设计指南》:


67使用液体布局,以使首页大小适应不同的屏幕分辨率。它也是《十大最受侵犯的首页设计指南》之一:


对抗冻结的布局似乎是一场输了的战斗,但值得重复:
不同的用户有不同的显示器
尺寸。拥有大显示器的人希望
能够调整其浏览器的大小以同时查看多个窗口。
你不能假设每个人的窗口宽度都是800像素:也是
对于某些用户来说太多了,对其他用户来说太少了。


#6 楼

混搭呢?如果有足够的空间,这将以固定宽度(70em)显示#content-section-否则该部分将缩小到视口/浏览器窗口的80%。

#content {
    margin: 0 auto 2em 0;
    width: 70em;
    max-width: 80%; }


#7 楼

动态布局的优点是它可以在所有屏幕尺寸(包括移动设备)上使用。尽管要使所有尺寸的东西看起来都不错,这是艰巨的工作。要问的问题是-您的访客会使用移动设备吗?