logo标签列表

流式网站还值得制作吗？

htmlcsslayoutstaticfluid-layout
218

我正在制作一个网站，现在正在考虑是否要选择流动式设计。固定宽度的网站更易于制作，也更容易让它们看起来一致。

说实话，个人更喜欢看宽度可以自适应到监视器的整个宽度的流动式网站。我的问题是，因为在大多数现代浏览器中，你可以按住Ctrl键并滚动鼠标轮来调整任何网站的大小。

那么，创建一个流动式网站是否值得麻烦呢？

1
如果 (a == 1) { +a } else {'nawp'} - Sphvn
20个回答
52

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

以下是我尊重并认为是值得效仿的网站示例。

动态网站示例：

亚马逊

维基百科

静态网站示例：

苹果

eBay

MSN

StackOverflow

MSDN

一些混合网站！

CNN

我认为大多数时候我更喜欢静态网站。它更容易在更多浏览器中呈现良好，也更容易阅读。

17
CNN 是如何混合报道的？ - Alix Axel
43

对我来说，使网站具有流动性，但同时添加一个min/max-width属性似乎是两者兼得的最佳方案。这种做法既支持流动性，又限制了在一定宽度范围内的变化（比如800px和1200px）。

这取决于你自己——以下是需要考虑的一些因素：

  1. 当行很长时，阅读文本会更加困难。
  2. 你的用户可能拥有比正常分辨率更大或更小的分辨率，选择“不正确”的静态宽度会让他们感到烦恼。
  3. 维护流动性网站可能比静态网站要复杂，但并不一定。
那方面的浏览器兼容性有什么评论吗？ - HaveAGuess
1
请参见：http://www.quirksmode.org/css/contents.html#t25 - Nick Presta
谢谢，我正在尝试使用getskeleton的响应式网格。 - HaveAGuess
37

当然。对于使用巨大显示器的人来说，调整页面大小是很不方便的。而且某些布局会有点棘手。即使是微小的不便之处，也会影响人们对您网站的看法。

此外，netbook 的分辨率比较奇怪，这使得为其设计网站变得困难。例如，我在1024x600上编写了这篇文章。

现在（在现代浏览器中），它并不特别困难，特别是在CSS中使用 min- 和 max-height 以及CSS3中的新渐变等等，因此图像缩放在不久的将来将不再成为大问题。

针对下面的评论，我认为在这种情况下，利大于弊 - IE6在任何地方都是个问题。我们只需要处理它。

24
“现在也不算特别难。” 我持不同意见。IE6仍然非常普遍。编写一个可以在IE6上正常工作的流体布局是一个棘手的挑战。尝试搜索“CSS圣杯”（CSS Holy Grail），我很烦恼。 - spender
4
我像所有的网站开发者一样，大部分时间都喜欢忽略IE6。虽然不能摆脱它，但这让我更加开心 :)(我知道我回避了评论，但我现在想不到任何回应)。 - Lucas Jones
91
停止支持IE6。 - Jason
21
是的，在理想情况下，我们都应该停止支持IE6，但通常情况下，金钱会左右决策。 - spender
13
根据http://www.w3schools.com/browsers/browsers_stats.asp的数据，有13%的网络用户使用IE6，15%的用户使用IE7。这是支持IE6的一个很好的理由。简单的意识形态厌恶不足以废弃IE6。抱歉，Jason。 - Paul Nathan
显示剩余21条评论
16

你必须意识到大多数电脑用户甚至不知道如何在浏览器中缩放！ 大多数用户对于我们所拥有的计算机理解是如此之远。 我们始终必须记住这一点。

2
好的，那么这意味着什么呢？你是支持哪一方的论点？ - Mark
1
这意味着我支持流式网站，因为我们不能假设用户知道如何自行更改大小。 - Alex Baranosky
难道你不需要调整浏览器大小才能判断一个网站是否是流式的吗？怎么可能有人不知道如何调整窗口大小呢？ - mk12
1
是的，我指的是放大 :) 我自己也是一分钟前第一次放大了我的浏览器。 - Alex Baranosky
更糟糕的是，当最终用户在使用鼠标滚轮滚动时意外按住控制键。幸运的是，现在许多新键盘都有专门的“缩放”按钮，这有助于使修复变得非常简单。只需按下键盘左侧缩放键旁边的“%”符号，就可以轻松解决问题，完美无缺。 - Ape-inago
显示剩余2条评论
9

基于文本的应用程序：不适用。基于表格的应用程序：适用。

流式布局的优点：

  1. 大屏幕用户可以更充分地利用其屏幕空间。
  2. 当您在页面上有大量信息时，对于拥有大屏幕的用户来说更容易使用。

流式布局的缺点：

  1. 如果文本列宽度过宽，则很难阅读。报纸中使用列的好处是使跳到下一行变得更加容易。
  2. 由于CSS的限制，实现起来有些困难。

如果您正在显示表格数据（iTunes，数据库管理器等），则流体宽度很好。如果您正在显示文本（文章，维基页面等），则流体宽度不好。

当在大浏览器上阅读维基百科时，由于句子之间的间隙不随行长增加而缩放，因此很难阅读。我发现很难来回扫视我的眼睛，因为没有“装订线”可以在来回移动我的眼睛时跟随。 - Ape-inago
8

从我的iPhone的角度来看，固定宽度布局在使用代码块时存在问题。对于宽代码块，滚动条不会出现，因此我无法阅读块的最右侧。

除此之外，我认为这只是一个简单的问题，取决于您设计的网站类型以及在不同大小的屏幕和窗口上的外观。如先前提到的，有一种选项可以设置最大宽度，但是对于代码块和iPhone也适用相同的警告。我已经设计了两者，我没有偏好其中任何一种。

虽然，在流体布局中玩弄浏览器大小时观察方框移动很有趣，但我很容易被逗乐。

6
最重要的是考虑您的网站或应用程序的主要使用情况。您是否希望人们仅在移动设备上使用它？手机，上网本，台式机？
请查看Ethan Marcotte的“响应式Web设计”：http://www.alistapart.com/articles/responsive-web-design/这是一篇很棒的文章，演示了如何使用媒体查询来构建真正流畅的布局。有时，您需要为不同的用户代理构建单独的前端，但有时媒体查询是服务于不同的用户代理跨多个分辨率的完美工具。
5
这取决于你想要做什么。看看SO网站，它是固定宽度的，非常好。实际上，如果它是流式布局，那会有点痛苦。有些网站使用流式布局看起来更好，但个人而言，除非你有充分的理由去使用流式布局，否则我会选择固定布局。
1
它总是适合我的浏览器，而不是让我调整大小，怎么会很麻烦呢？当然，有些情况下，使用流式布局难以实现复杂的图形布局，但这显然不适用于SO的大部分简约设计。 - bobince
2
这会很恼人，因为所有答案都会跨越页面。我很高兴文本在大约500个像素左右换行。这就是为什么书的宽度比例通常是这样的，因为人们的眼睛在横向移动到一定程度后会感到疲劳... - Jason
那不是什么麻烦事。那正是我想要的。如果你想限制非常长的行，可以使用em设置max-width，但在典型的字体大小下，500px并不算长。有一些实际研究并不支持传统的基于印刷的线长用于屏幕阅读。 - bobince
3
我希望对方（指某人）更加自如。 - Nosredna
4

评论中有很多好的观点，但从你的问题来看，似乎你真的喜欢流动的设计并想要创建一个这样的网站，那就去做吧，这是你的网站，它不必像网络上的其他网站一样。

只是要注意每种解决方案的优缺点。

3
在一定程度上是可以的。如果文本太宽，阅读起来会变得很烦人。如果你有一个大屏幕显示器，可以试试在记事本中粘贴一些没有换行符的文本进行测试。
然而，当尺寸缩小时，流动性可能是一个好主意。移动电话浏览器越来越能够很好地显示“正常”的网站，但它们有时会受到宽度限制，因此，如果您的网站可以适应更小的空间，那么就会受益。
个人而言，我也喜欢在我的监视器上保持浏览器，但只占据监视器宽度的一半（24英寸）。能够很好地缩放到这种大小的网站非常好。
我认为这主要是出于用户方便考虑。并不是所有的网站都会从流动性中受益，但我认为那些有大量文本内容的网站最能从中受益，至少如果它们是流动的，达到最大宽度（比如800像素或其他）。
同意。我倾向于将所有网站建立在800-1200像素的宽度范围内。在页面上查看1600像素时，往往没有足够的内容来分散，这只会让它看起来空洞无物。 - womp
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接