it-swarm.cn

对于网站,最好使用可变宽度的布局或固定宽度的布局?

由于屏幕分辨率不同,用户浏览网站的体验可能会有所不同。以固定宽度布局网站会更好吗? (如果是,那么标准分辨率的静态宽度应该不同吗?)还是应该始终以可变宽度来布置网站?

32
txwikinger

我认为这里没有一个简单的答案,因为最终,这取决于您要构建什么以及为谁构建。固定宽度站点和可变宽度站点都具有其优点和缺点。

我在这里要指出的一件事,我不会谈论固定/流动站点的移动体验,因为当设计针对移动设备而不是桌面站点到移动平台的端口时,移动站点才是最佳选择。

固定宽度-优点

固定宽度的站点比可变宽度的站点具有更一致的体验,并且开发速度更快。它还可以使设计人员对演示文稿有更多的控制权,因为您可以为宽度,行长,字体大小等设置硬值。与可变宽度站点相比,它最终也易于维护。

固定宽度-缺点

另一方面,当出现Edge外壳时,固定宽度设计开始失败。目前,人们通常会为1024px宽分辨率的显示器设计站点,但是仍然有人们在使用分辨率较低的机器。现在,我正在开发一个使用960px网格设计的应用程序;我今天看了一下分析,发现3%的用户使用800 x 600显示器,而约5%的用户使用的分辨率低于1024 x768。这些用户可能会获得非常糟糕的体验,因为网站的宽度是固定的。

流体宽度-优点

流体宽度允许根据用户设置扩展设计;设计适应他们,这是一件好事。这使站点可以保持成比例的负空间,因此,站点永远不会感到太凌乱或太开阔(除非以这种方式专门设计)。

流体宽度-缺点

不幸的是,流体宽度设计也不是Edge案例所能接受的。当宽度太窄或太宽时,可能会发生不良情况,尤其是文本。太短或太长的行长度基本上是不可读的。此外,许多形式的媒体,例如图像或Flash对象,在流宽设计中很难缩放; IE需要使用javascript来调整图像的大小,否则它们将被像素化。

响应式网页设计

少数人显示了示例,但尚未提及该技术的名称。 Ethan Marcotte最近创造了该术语来描述可以根据用户的屏幕分辨率完全改变的流体布局(请参阅详细信息 此处 )。这是固定宽度和流体宽度的混合-它使您可以设置最小值和最大值,以使介质或线长不会失控,并且还允许设计根据用户的设置进行调整。当然,该技术也有其自身的优点和缺点。尽管提供了专门为用户设置选择的布局,但这种类型的网站很难开发。并非所有浏览器都支持执行此操作所需的媒体查询。另外,您实际上是在开发多种布局,从而延长了构建和维护所需的时间。

我认为不可能只盖毯子“永远使用”或“永远不要使用”;我要说的是,在做出决定之前,您应该始终评估自己的需求。在大多数情况下,我觉得固定宽度的布局可以满足您的目的,但是流畅或响应式的布局可以提供更好的用户体验,而这只会带来额外的困难。

17
RussellUresti

使用100%可变宽度的问题在于,对于屏幕尺寸最小和最大的用户,它确实无法很好地显示。通常,我将通过设置最小/最大宽度来为规范设计主要内容部分,然后将重要(固定)内容居中。然后,您可以使用可变宽度的设计元素(因为它们不那么重要)来拉伸/缩小以填充屏幕。

这样,重要信息始终(希望)正确显示,同时在许多分辨率下看起来不错。

24
LoganGoesPlaces

我不是网页设计师,但我认为理想情况下您应该进行流畅的布局。也就是说,将根据当前宽度自动(动态)更改的布局。这样,可以很好地支持诸如电话之类的狭窄设备,以及所有各种显示宽度。

博客文章 最后是一个流畅的Hicksdesign 既说明又演示了该技术。它具有3列,2列和1列布局,可根据浏览器窗口的宽度进行选择。

7
whybird

一旦行长太长,文本将难以阅读。因此,对于任何可变宽度的网站,任何文本区域都至少需要有一个最大宽度才能保持可读性。

要使宽度可变的站点看起来不错,要困难得多。

6
Mongus Pong

取决于我的工作,但我仍然倾向于倾向于固定宽度的站点。原因是因为它使您可以更好地控制ui并在整个屏幕尺寸上保持一致。在较大/较小的显示器上,许多流体宽度站点看起来都很糟糕(取决于它们的设计目的)。

我的一般规则:

  • 如果网站的可用性在很大程度上取决于界面和/或内容主要是文本:固定宽度
  • 如果该网站的界面最少,但是内容大部分是可视的(例如,照片网站或地图应用程序),那么我会选择流畅的内容。

以下是一些优点/缺点的详细信息: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-为你/

2
Ryan

只要有可能,我都尽量不要在px中设置对象的特定高度和宽度,而在%

1
megubyte

我建议考虑可变宽度,或者为更宽的屏幕提供其他布局。

如果确实要固定宽度-请确保它不是很小的宽度!我看过一些宽度为500或600像素的网站,这些内容使阅读网站就像扫描黄页一样。

我一直很喜欢The Man In Blue的基于可用宽度提供备用布局的方法: 请参阅此处的现场演示

1
scunliffe

您可能希望以landscape方向设计网站的布局。越来越多的宽屏显示器正在使用,其高分辨率为1920x1080(这是最常见的)。您是否尝试过最大化显示纵向固定布局的浏览器窗口?就像屏幕的一半到三分之二充满了背景颜色/图像。

Windows 7允许您快速将窗口的大小调整为屏幕的一半并粘贴到侧面,这是很好的: WindowsKey + Left/Right

1
Mircea Chirea

可变宽度可能是可行的方法,因为使用固定宽度,有些人可能认为您的网站对他们的显示器来说太小,而有些人可能认为它对显示器来说太大了。

0
David

这取决于网站的内容。如果文本很多,可变宽度会更有意义,因为文本可以散开并且用户可以更有效地阅读。如果它更像是一个外观网站更重要的营销网站,则请使用固定宽度,因为要使固定宽度的网站看起来更好很难。

0
Kai Chan

对于某些用户,您在设计固定大小的布局时所做的任何假设都是错误的。为每个人提供令人满意的体验的唯一方法是使用灵活的响应式设计。

两个问题(试图避免重复):

  • 您不能假设浏览器是全屏的;报告屏幕分辨率的分析只能说明部分故事。

  • 您不能假设用户使用的字体大小与您相同。对于不得不将字体大小增加一些缺口的人来说,太宽的行可能无法读得太宽。相反,根据字体设置为其设置固定宽度的列可能意味着用户每行或每行看到五个单词。

为了对所有用户可用,您的网页设计需要使用浏览器为您提供的所有空间。信任用户调整浏览器大小以优化自己的体验;然后,您应该在这些范围内工作。这种方法适用于30英寸显示器和7英寸平板电脑(如果您未制作手机专用版本,甚至可以使用手机)。

0
Monica Cellio