流动的网站是否值得制作?

时间:2009-09-11 22:42:10

标签: html css layout static fluid

我现在正在建立一个网站,我正在努力决定是否应该让它变得流畅。固定宽度的网站更容易制作,也更容易使它们看起来一致。

说实话,我个人更喜欢看流畅的网站,这些网站可以扩展到我的显示器的整个宽度。我的问题来自这样一个事实,即在大多数现代浏览器中,您可以控制并滚动鼠标滚轮以基本调整任何网站的大小。

那么创造一个不值一提的流畅网站呢?

20 个答案:

答案 0 :(得分:52)

这取决于您的受众和您的内容。

以下是我尊重的网站,我认为这是模仿的榜样。

流体示例:

Amazon

Wikipedia


静态示例:

Apple

eBay

MSN

StackOverflow

MSDN


有些混淆了!

CNN

我认为我大部分时间都喜欢静态。在更多浏览器中使它看起来更好更容易。它也更容易阅读。

答案 1 :(得分:44)

让网站流畅,但添加一个min / max-width属性对我来说似乎是两全其美的。您支持流动性,但是您将其限制在一定宽度(例如,800px和1200px)。

由你决定 - 这里有一些事情需要考虑:

  1. 当行很长时,文本很难读(呃)。
  2. 您的受众群体的分辨率可能会比平时更高或更小,而选择“不正确”的静态宽度会让他们烦恼。
  3. 维护一个流体站点可以,但不一定比它的静态对应物困难得多。

答案 2 :(得分:37)

绝对。拥有巨大显示器的人必须调整页面大小,这是一个很大的不便。一些布局也可能有点狡猾。一点点不便,无论多么微不足道,都会影响到人们对您网站的看法。

此外,上网本有奇怪的分辨率,这使得很难设计网站。例如,我写的是1024x600。

现在也不是特别难(在现代浏览器中),尤其是CSS中的min-max-height,以及CSS3中的新渐变等,因此图像缩放不会那么大在不久的将来会出现问题。

在回应下面的评论时,我认为在这种特殊情况下,优点超过了缺点 - IE6无处不在。我们只需处理它。

答案 3 :(得分:16)

你必须意识到大多数计算机用户甚至不知道如何放大浏览器!大多数用户对我们拥有的计算机的理解还很远。我们总是要记住这个事实。

答案 4 :(得分:8)

基于文字的应用:。基于表格的应用:

流体布局的优点

  1. 拥有大型显示器的人可以使用他们的屏幕空间。
  2. 当您的页面上有大量信息时,对于拥有大型显示器的用户来说更容易。
  3. 流畅布局:

    1. 如果流体宽度文本列太宽,则难以阅读。在报纸上使用栏目背后有一个很好的理由:它可以更容易地跳到下一行。
    2. (有点)难以实现,因为CSS的局限性。
    3. 如果您正在显示表格数据(iTunes,数据库管理器......),则流体宽度很好。如果您正在显示文本(文章,维基页面......),流体宽度很差。

答案 5 :(得分:8)

从iPhone的角度来看,使用代码块时固定宽度布局是有问题的。宽代码块的滚动条没有显示,所以我无法读取块的最右边。

否则,我认为这是一个简单的问题,您正在设计什么样的网站以及它在不同大小的屏幕和窗口上的外观。如前所述,可以选择设置最大宽度,但同样的警告适用于代码块和iPhone。我设计了两个,我不喜欢一个而不是另一个。

虽然看到盒子四处移动很有趣,因为我使用流畅的布局浏览器大小,但我很容易被逗乐。

答案 6 :(得分:6)

最重要的是考虑您的网站或应用程序的主要用例。您是否希望人们专门在移动设备上使用它?手机,上网本,台式机?

看看Ethan Marcotte的“响应式网页设计”:http://www.alistapart.com/articles/responsive-web-design/

很棒的文章,展示了使用媒体查询真正流畅的布局。有时您需要为不同的用户代理构建单独的前端,但有时媒体查询是跨不同用户代理服务多个分辨率的完美工具。

答案 7 :(得分:5)

这取决于你想要做什么。看看SO。它是固定的宽度,非常棒。事实上,如果它是流动的,它将是一个PITA。有些网站在流畅的布局上看起来更好,但就个人而言,除非你有充分的理由去流畅,否则我会选择修复。

答案 8 :(得分:4)

评论中有许多好处,但从您的问题看来,您似乎非常喜欢流畅的设计,并希望创建一个,所以去它,它是您的网站,它不一定像网络上的每个其他网站。 / p>

请注意每个解决方案的优点。

答案 9 :(得分:3)

一点 - 是的。

有一定宽度,如果文字太宽,文字开始变得烦人。如果你有一个大型显示器,只需抓住记事本并将一些文字粘贴到其中而不会出现断线,因此很容易测试。

然而,当降低尺寸时,流动性可能是一个好主意。移动电话浏览器越来越能够正常显示“普通”网站,但它们有时会受到宽度限制,因此,如果您的网站可以适应更小的空间,则会受益。

就我个人而言,我也喜欢将浏览器放在我的显示器上,但只有显示器宽度的一半(24“)。可以很好地扩展的网站非常好。

我认为这主要是用户便利案例。并非所有网站都会因流畅而受益,但我认为拥有大量文本内容的网站最能从中受益,至少如果它们流动到最大宽度(比如800px或其他)

答案 10 :(得分:2)

前言:不是专业的网络艺术家。

我发现,在手机和超大屏幕尺寸上,有太多令人费解的东西可以让事情发生,特别是在任何合理有趣的复杂性中。

通常,我会以某种方式设计一个固定宽度的网站;通常以[600,1200]为界。

我还发现超宽的内容列很容易阅读。我似乎记得有一些研究表明每列的最佳单词数量。

答案 11 :(得分:2)

你可以这样做。

#使主要布局流畅并对其应用“ max-width:1140px ”并使其居中。

这样就不会在较大的屏幕上显示“长行”文字,并在较小的屏幕上正确结算网页(不包括800x ***和更低)。

我已经在我的新项目中实现了这个方法,它就像一个魅力。

a.t.b .. :))

答案 12 :(得分:2)

是。页面缩放很棒,但它主要用于使文本更大,而不是使文本填充视口。当然,如果正文文本已经太宽,那么缩小以使其适合通常会使其无法读取。

如果要使文本适合视口,无论是否缩放,都需要液体布局。

关于'长线难以阅读'的观点经常被试图证明固定宽度设计(*)合理化的设计者所夸大,但实际上它在屏幕上的表现并不像在纸上那样强烈。当然,设置良好的前导/线高是很重要的,并且最大宽度可以用于抑制长线的最差过度。 (将其设置为以字体为单位的em单位。)在IE6中没有获得max-width,但这不是曾经的灾难。 (如果你真的关心那些家伙,你可以用一点JavaScript修复它。我没有。)

(*对于高度图形化的布局确实不那么有用。但是对于更简单的布局,例如,呃,StackOverflow,没有任何理由不去流动.Tsk @SO,呃!)

答案 13 :(得分:1)

我认为决定流/固定应该也基于网站的内容

  1. 对于有大量平原的网站 信息(如新闻门户网站), 更好地使用流体布局。

  2. 网络服务更好看 固定尺寸,所以你总是知道 接口元素所在的位置 在他们的地方,他们没有动 不断地。不断。

答案 14 :(得分:1)

是的,流畅的网站值得创造 正如您所说,当您在设计阶段正确规划时,它看起来很合理。

您对Ctrl + Scrollbar的影响存在疑问并不是什么大问题。 此功能主要用于访问,通过增加大小使文本更具可读性。

但是,如果您以像素(px)提及所有尺寸,则不会发生。 只有在使用“em”指定大小时才会进行适当的调整。所以你有办法打开/关闭它

答案 15 :(得分:0)

我很喜欢固定在< 800px ...更容易阅读更窄的列,在任何地方工作。也就是说,如果你想创建一个提供超文本的网站......提供应用程序前端的网站,我认为另一种蠕虫完全可以......

答案 16 :(得分:0)

流体设计 - 真正流畅 - 很难。很难。这不只是页面宽度的问题 - 你的字体是否可以缩放,并且所有内容都可以随之缩放?理想的情况是:

  • 尺寸应在em而不是px
  • 中定义
  • ......这适用于元素大小,而不仅仅是字体!
  • 如果字体大小或缩放级别发生变化,页面元素应相对于彼此相同

我们的主要产品是流畅的,作为设计师,我的观点很痛苦,特别是因为它涉及很多用户生成的内容。

首先,图像 - 在固定宽度的网站中,您可以拥有一个填充宽度一半的图像,看起来很棒。在一个流动的网站中,这个图像很可能在空白的海洋中丢失,看起来相当孤独。

一旦border-radius和其他CSS3属性发挥作用,生活应该会变得更容易,但遗憾的是我们的核心受众是政府工作人员,所有人都仍然使用IE F!!* ING 6!


要回答这个问题,“它值得吗?” ,如果你做对了。

这是一个场景:选择一个固定宽度的网站:你的老板在他全新的1920x1600笔记本电脑上将它显示给客户,然后向你抱怨“这个家伙的屏幕上的一切看起来都很小!”

答案 17 :(得分:0)

我认为能够在用户的屏幕上很好地扩展,而不是让用户平移和缩放是很好​​的。在用户从各种各样的设备上浏览网页时,从智能手机到超便携PC,每种设备都有自己的,可能是非标准的分辨率,我认为将用户体验保持在高水平是非常重要的。您的网站在此类屏幕上查看。关于文本长度,它可以以一定比例为界,因此它可以很好地适应布局。我认为还有一些框架可能有助于以流畅的方式编写网站,并有助于编码可维护性。

答案 18 :(得分:0)

我会反对大多数人并说不。推理:像维基百科这样流畅的网站由于线条长而在大屏幕上阅读是一场噩梦(尽管它的引用使其难以在最佳时间阅读)。

问题确实发生,因为没有相对于屏幕分辨率调整文本大小的机制。如果你可以在更大的分辨率下自动使文字更大,你可以更接近每行80多个字符,这通常被认为是最好的可读性。

还存在图像和其他固定大小元素的问题。您可以拥有大型图像,并在必要时让浏览器缩小它们,但是您会遇到其他问题,例如更长的下载时间和许多浏览器中的图像质量问题。

答案 19 :(得分:0)

我很喜欢固定最大宽度介于800px - 1000px之间的网站,但也可以缩小,以便我可以读取内容而无需左右滚动,也不会缩小,因为通常文字变得太小而无法阅读,这会伤害我的眼睛。所以,这通常是我想要的,因为我想建立我可以引以为傲的网站。