使用流体布局是否明智？

Question

Google 实验室浏览器大小

---

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

但现在“情况”发生了变化，当今大多数用户使用的最低和最高分辨率之间存在很大差异，而且这种情况似乎会持续下去。

我的上网本仅支持 800 像素或 1024 像素 宽；我还有一台支持1650 像素的 22 英寸显示器，以及支持1920 像素的 24 英寸显示器，而且越来越多的显示器越来越常见。

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

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

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

网络上事实上的标准仍然是 1024 像素宽，在 24 英寸显示器中保留980 像素未使用看起来很奇怪，但不能说是错误的。所以我们的选择是什么？

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

PS：也欢迎使用这些系统之一的热门网站，我对使用流体系统的非文本网站特别感兴趣。

---

编辑：我刚刚看到这个答案，我对流体布局和流体布局之间的区别有点困惑，不是吗？完全一样吗？

Answer 1

我通常认为流体布局是个好主意。当你的流体布局在高分辨率屏幕上变得非常宽时，问题就开始了——人眼在不失去垂直定位的情况下水平跟踪的距离是有限的。这就是为什么报纸专栏总是相当狭窄的原因。

尝试在高分辨率屏幕上查看维基百科，您会发现他们将最大宽度限制在 800-900px 左右 - 超过这个宽度（假设相当标准的 12pt 字体），人们就无法阅读到最后的行，然后毫不费力地找到下一行的开头，整个事情变得一团糟，眼睛和脖子都紧张。

在我构建的网站上，我使用 max-width 将文本内容（并且我还包括图像和其他内容）的最大宽度限制为大约 720-800px，加上侧边栏等可能会达到 1000px 左右。如果屏幕更宽，则可以将内容居中或左对齐（在 RTL 网站上右对齐） - 两者都可以很好地工作。

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

Answer 2

在 24 英寸显示器中保留 980 像素未使用，这看起来很奇怪，但不能说是错误的

我在这里不同意。如果你有一台分辨率那么高的显示器，你可能没有在最大化的浏览器窗口下运行。甚至如果您是这样，您是否真的对内容全部位于中间的固定区域感到不安？真的吗？

只要您的网站具有合适的可用布局，我就不会在高分辨率显示器上看到两侧的空间问题。

Answer 3

有多种方法可以在样式表内创建不同的 @media 规则 -W3C对此有一些内容——尽管手持设备的浏览器是否遵守规则是一个很大的薛定谔猫问题，但可以相当安全地假设，即使它们不遵守规则，它们也有足够大且比例良好的屏幕来只需使用网站在桌面上显示的比例模型即可。

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

如果没有，那就是他们的问题。

Answer 4

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

图像的问题并不是那么大。您要做的如下：以

1. 您期望的最大尺寸上传图像。

2. 按如下方式使图像变得流畅：

   

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

Answer 5

流体布局是 响应式设计 支持问世。不再需要使用流体或弹性布局。

• http://lessframework.com/

Answer 6

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

任何“最佳实践”的集合都不会等同于真正的设计教育，也不是所有用户都觉得有必要将浏览器窗口放大到充满整个屏幕。

Answer 7

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

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

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

HTH。

Answer 8

我认为最好有一个布局的最大宽度，你可以用 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;
}

我希望它对你有帮助:]，你当然可以使用这个主体类进行更多更改，例如：

.res900 #menu {
     width: 100px;
}

编辑2：
您可以用同样的方式处理图像：

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

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