何时选择流式CSS布局而不是固定布局？为什么？

Question

4

我想知道你对编写CSS时，什么情况下选择使用固定布局或液态布局的看法？

我认为固定布局更容易/更快速地编写，因为液态布局需要更多时间来确保所有元素都能很好地适应其父元素。

那么，你何时选择液态布局或固定布局（或者反过来）？为什么？

- Alex

好问题，但它可能有一个正确的答案 :) - Shaheer

4个回答

3

这不是技术问题，而是决策问题。如果你（或客户）想要流式布局，那么你就选择流式布局。

我个人不喜欢流式布局。为什么？因为非常宽的窗口会导致很长的文本行，这些行很难阅读。

好吧，还有其他一些方面需要考虑。你的页面是否需要可访问性？那么你必须为那些缩放页面的人制作一种类似于流式布局的布局。

你也可以考虑响应式网页设计，这种设计也适用于移动浏览器。
http://www.alistapart.com/articles/responsive-web-design/

- yunzen

这正是我询问的原因，因为我的页面需要可访问性，我在想是否选择Liquid。 - Alex

+1 @yunzen "使用非常宽的窗口会导致复制文本行非常长，很难阅读。" - therobyouknow

如果您具有可访问的布局，则可以选择一个固定布局并在其中添加一些“流动部分”。您要实现的目标是，如果用户将缩放比例（使用IE和FF进行文本缩放）调整到200％，则所有重要内容都必须保持在宽度约1000px的窗口内。这不是很容易实现，而且取决于页面整体布局。 - yunzen

2

当我需要选择布局时，除了商务风格的网络应用程序之外，我很少使用流式布局。也就是说，在需要在表格等地方展示大量横向信息的应用程序中，出于明显的原因，我会选择流式布局。对于更标准的网站，如果可能的话，我会坚持使用固定布局。

即使在后者中我使用流式布局，我通常仍会对文本内容强制设置最大宽度，因为我不是特别注重政治正确，而且让99%的访问者阅读起来舒适愉快对我来说比让一小部分人使用起来相对容易更重要——只要我保持对那些人的可访问性。像yunzen所说，文本行长对设计和可读性都非常重要。不要让这些行无限延伸……

大多数情况下，我的固定布局网站将采用不同的方式来适应较小的屏幕尺寸，而不仅仅是简单的流式拉伸——将侧边栏等移动到文本下面，并可能调整文本宽度以适应设备视口。有时候，但并不总是，这需要CSS媒体查询。

- JimmiTh

+1 这正是我提出问题时所想的，感谢您的验证。 - Alex

0

通常固定布局更容易设计和开发，访问者也习惯这种布局。

流式布局需要更多的规划，而且并不适用于所有类型的Web应用程序。我并不经常使用流式布局方法。

- Alp

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- therobyouknow · Accepted Answer

更新2：我认为现在最佳实践是设计具有响应和自适应功能的站点，可以适应任何屏幕大小。Liquid CSS可能没有你想象中的那些缺点，比如长文本行（取而代之的是文本块位置会即时调整），响应式设计的例子——浏览器端代码，页面能够适应任何屏幕大小：

自适应设计：服务器托管的站点检测请求页面的浏览器类型，并提供适合的页面布局，例如移动设备。这种方法存在缺陷，因为用户代理标识符并不总是精确的——例如，许多浏览器在其ID中包含mozilla字符串，因此不一定总是最好依赖于此数据。

以前的答案

Liquid布局（在水平方向上收缩或拉伸以适应窗口的水平宽度）

优点：内容会即时重新格式化以充分利用窗口宽度。这意味着不需要选择最流行的固定宽度，例如940px、960px或978px。这对于略有差异的小屏幕手持设备非常有用。在考虑所有可能的屏幕尺寸时可以少做一些工作。
缺点：由于站点会水平收缩或拉伸以适应，因此您不能像固定宽度那样控制布局。美学和网站外观将受到较少的控制。您可能会发现，必须考虑屏幕真正很小且菜单导航都挤在一起或在大屏幕上过于分散的情况，这与我关心的支持所有屏幕宽度的情况并不相符。

固定布局（布局固定，不会改变以适应可用的水平宽度）。

四处看看主要的网站——他们在使用什么。对我来说，固定宽度更为流行，包括stackoverflow.com。

话虽如此，看看这个自适应的网站：http://derekallard.com/

在这里，开发人员使用了流体布局的优势，通过使用图形层次，可以在您的窗口中调整网站宽度时滑动到彼此之上。

更新：没有对错之分。来自电视、电影和报纸领域的媒体工作者可能更倾向于使用固定宽度，因为他们熟悉具有该特性的媒体。