使用流体布局是否明智？答案

【问题标题】：Is it wise to use a Fluid Layout?使用流体布局是否明智？
【发布时间】：2010-12-30 02:25:17
【问题描述】：

Google Labs Browser Size

我一直更喜欢固定宽度的布局而不是流体宽度的布局，主要原因之一是我能够更好地了解整个图片的情况，而不必担心屏幕分辨率。

但现在“图片”发生了变化，现在大多数用户使用的最低和最高分辨率之间存在很大差异，而且它们似乎会继续存在。

我的上网本只支持 800 像素或 1024 像素宽；我还有一台支持 1650 像素 的 22 英寸显示器，支持 1920 像素 及更多像素的 24 英寸显示器正变得越来越普遍。

一段时间以来，我几乎“忽略”了 800 像素的用户，我一直在开发固定的 950/960 像素宽，我还注意到流行的网站（一个是SO）要么使用这种方法，要么流体的。

对于（几乎）只有文本的网站（如Wikipedia），我认为使用流体系统没有问题，但所有其他依赖图像/视频来创建有趣内容的网站?社交网络、分类广告等等……他们解决这个问题的方法是什么？

Seam Carving 在不久的将来似乎是一个不错的选择，但它还不够成熟（浏览器和 jQuery 目前都不支持它），我也觉得用户不会理解它，感到困惑并因此放弃该网站。

事实上网络上的标准仍然是 1024 像素宽，而在 24 英寸显示器中留下 980 像素未使用似乎很奇怪，不要说错了。那么我们有哪些选择？

我很想听听您对此的看法以及您在流体和固定系统方面的经验。

PS：也欢迎使用其中任何一种系统的流行网站，我对使用流体系统的非文本网站特别感兴趣。

编辑：我刚看到this answer，我对流体布局和流体布局之间的区别有点困惑，它们不应该完全相同吗？

【问题讨论】：

不要忘记移动用户。屏幕分辨率可以是 320 x 240。
@Juha：是的，但是无论如何移动浏览器通常都会调整内容的大小以适应屏幕，至少这是我的经验。
请参阅stackoverflow.com/questions/1413602/… 了解更多关于这个无休止争论的信息。
@Alix：检查我的答案。希望它会有所帮助。

标签： css fixed fluid

【解决方案1】：

我认为最好有一个最大的布局宽度，你可以用 Javascript 来改变它。一个很好的例子就是这个布局，看看如果你改变宽度，布局会发生什么（在 Firebug 或其他东西中）：http://tweakers.net/ 他们选择了 1208px 的宽度，并在浏览器宽度发生变化时使用 Javascript 将其缩小。禁用 Javascript 后，网站仍然是 1208px 宽，这似乎不是问题。

编辑：网站的第一个宽度将是 900px。使用 Javascript，您将检查浏览器的宽度，并提供与浏览器宽度最接近的分辨率的类。例如：浏览器宽度好像是1100px，所以你给一个类'res1024'，或者浏览器宽度是1080px，那么你给一个类'res1100'。这将是您的 CSS：

#wrapper {
    width: 900px;
}
.res1024 #wrapper {
    width: 1000px;
}

.res1100 #wrapper {
    width: 1080px;
}

我希望它对你有所帮助:]，你当然可以通过这个 body 类做更多的改变，比如：

.res900 #menu {
     width: 100px;
}

编辑 2：你可以用同样的方式处理图片：

.res900 img.fluid {
    width: 200px;
}

.res1100 img.fluid {
    width: 300px;
}

【讨论】：

嗨哈门，如果我在显示宽度滚动条的下方调整浏览器窗口的大小，您提供的链接的白色（内容）部分似乎总是占据 1000 像素宽。
嗨，Alix，也许是因为你的屏幕分辨率是 1024 像素？让我编辑我的帖子，让您了解它是如何工作的：]
哇，他们成功地创造了一种设计，除了全屏浏览器窗口之外，它的所有宽度都可用。（打断我的，因为我的标签在右侧，所以内容在它下面消失了）干得好。 :P
到处都是重叠的内容；这是一个可怕的、可怕的例子。
@Harmen：我现在使用的是 1650 像素。内容区域从默认的 1124 像素变为最小 1000 像素，仅此而已。

【解决方案2】：

我从不同的角度处理问题。有一个流畅的布局，但给它一个最小宽度（而不是最大宽度）。您可以使用 CSS 实现这一点。

图像的问题不是那么大。你要做的是：

以您期望的最大尺寸上传图片。
使图像流动如下：

<img src="http://example.png" style="width:32.5%">

当您调整页面大小时，图像将以百分比宽度重新调整自身大小。只要确保图像中没有任何宽度或高度属性即可。我称之为超弹性:)

【讨论】：

嗯...有趣的方法。你知道使用这种方法的任何网站吗？
我猜通过让浏览器选择图像大小它会有奇怪的工件，不是吗？

【解决方案3】：

这个问题没有正确答案，因为没有两个设计目标是相同的。流畅的布局几乎不可能实现任何类似的排版控制，但并非所有设计都需要或想要它。

“最佳实践”的集合永远不会等同于实际的设计教育，而且并非所有用户都觉得有必要将浏览器窗口打开以填满整个屏幕。

【讨论】：

【解决方案4】：

有一些方法可以在样式表中创建不同的@media 规则—W3C has something on this—尽管手持设备的浏览器是否会遵守规则是一个大薛定谔的猫，但可以相当安全地假设，即使他们不遵守规则't，他们有足够大且比例合理的屏幕，可以使用在桌面上显示的网站的比例模型。

在我看来，让设备与早于此类设备出现 5-10 年的网站兼容符合设备制造商的最大利益。

如果不是，那是他们的问题。

【讨论】：

您可以在媒体查询中使用device-width 为更小和更大的显示器提供不同的 CSS。
当然：目前它的支持不是很好，我认为至少在 IE 中你会不走运。

【解决方案5】：

在 24" 显示器中留下未使用的 980 像素似乎很奇怪，不要说错

我不同意这里。如果你有一个分辨率那么高的显示器，你可能没有使用最大化的浏览器窗口运行。即使你是，你真的很在意内容都在中间的固定区域吗？真的吗？

只要您的网站有一个不错的、可用的布局，我看不出高分辨率显示器两侧的空间问题。

【讨论】：

@Paul：就像我之前说的，我有 22" 1650 像素宽的显示器。我总是在最大化状态下使用我的浏览器，我必须说它给我留下了深刻的印象，我有 43% SO 上的视口为空白。使用 24" 显示器，我将有 51% 的视口未使用。这是对空间的严重浪费。
很公平。如果你能想到在太空中做些好事，那就太好了。只是因为有空间并不意味着你必须在里面放一些东西。
或许拥有大屏幕的用户可以放大网站。
我就是这么做的（用我的电视计算）

【解决方案6】：

我通常认为流畅的布局是个好主意。当您的流体布局开始在高分辨率屏幕上变得非常宽时，问题就开始了 - 人眼可以在不丢失垂直定位的情况下水平跟踪多远。这就是为什么报纸专栏总是比较窄的原因。

尝试在高分辨率屏幕上查看 wikipedia，您会发现它们将最大宽度限制在 800-900 像素左右 - 更多（假设是相当标准的 12pt 字体）并且人们不再能够阅读直到一行的结尾，然后毫不费力地找到下一行的开头，整个事情变成了眼睛和颈部的混乱。

在我建立的网站上，我使用 max-width 将文本内容的最大宽度（我还包括图像和其他内容）限制为大约 720-800 像素，使用侧边栏等可能会达到大约 1000 像素。如果屏幕比那个宽，那么要么将其内容居中对齐（在 RTL 网站上右对齐）——两者都可以正常工作。

但是您必须设计布局，使其在可用宽度较窄时流动 - 这对于使用上网本（现在相当流行，我预计将来会变得更流行）、智能手机和甚至是小屏幕移动设备。这样的移动设备越来越多地使用标准浏览器，您应该在设计中解决这个问题 - 即使移动浏览器可以以某种方式减少您的网站，“移动模式”通常会通过弄乱页面并破坏您的预期用户体验来做到这一点。

【讨论】：

很好的答案，为我提供了一些非常好的见解。谢谢。

【解决方案7】：

到目前为止，我读过的关于布局的信息最多的讨论是在 Andy Budd 的 CSS Mastery 书中。如果你有机会，一定要读一读。我认为这是一本关于 CSS（中级）的必备书籍。看起来布局章节在此处以文章形式提供。 http://www.webreference.com/authoring/style/sheets/css_mastery2/

另一个链接： http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/

液体和流体是同一技术的两个不同名称。

HTH。

【讨论】：

【解决方案8】：

在浏览器支持 Responsive Design 之前，流体布局是答案。不再需要使用流体或弹性布局。

【讨论】：