css - 使用流体布局是否明智？

Question

Google 实验室浏览器大小

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

但是现在“图片”已经改变，现在大多数用户使用的最低和最高分辨率之间存在很大差异，他们似乎会一直存在。

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

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

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

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

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

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

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

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

score 4 · Accepted Answer

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

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

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

score 4 · Accepted Answer

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

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

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

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

score 2 · Accepted Answer

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

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

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

score 1 · Accepted Answer

Fluid layouts were the answer before Responsive Design support in browsers came out. No need to use fluid or elastic layouts anymore.

score 1 · Accepted Answer

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

图像的问题不是那么大。您所做的是以下内容：

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

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

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

到目前为止，我读过的关于布局的信息最丰富的讨论是在 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。

score -2 · Accepted Answer

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

编辑：网站的第一个宽度将是 900 像素。使用 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;
}

css - 使用流体布局是否明智？

8 回答 8

Related

Reference