Question

Google Labs Browser Size

我总是更喜欢固定宽度布局而不是流体宽度布局，其中一个主要原因是我能够更好地了解整个画面的效果，而不必担心屏幕分辨率。

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

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

我已经非常“忽略”800像素的用户一段时间了，我一直在开发固定的950/960像素宽，我也注意到热门网站（SO为一个）要么使用这个接近或流动的。

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

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

网络上的事实标准仍然是1024像素宽，并且在24英寸显示器中留下 980像素未使用似乎很奇怪，不能说错。< strong>那么我们的选择是什么？

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

PS：使用其中任何一种系统的热门网站也受到欢迎，我特别感兴趣的是看到使用流体系统的非文本网站。

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

Answer 1

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

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

只要您的网站有一个不错的，可用的布局，我就不会在高分辨率显示器上看到任何一侧的空间问题。

Answer 2

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

尝试在高分辨率屏幕上查看维基百科，你会看到他们将最大宽度限制在800-900px左右 - 比那更多（假设一个相当标准的12pt字体）并且人们停止阅读直到行尾，然后毫不费力地找到下一行的开始，整个事情就会陷入混乱的眼睛和颈部疲劳。

在我构建的网站上，我使用max-width来限制文本内容的最大宽度（并且我还包括图像和其他内容）到大约720-800px，这有侧边栏等可能到达大约1000px。如果屏幕比那个宽，那么要么将左边的内容对齐（在RTL网站上右对齐） - 两者都运行良好。

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

Answer 3

有一些方法可以在样式表中创建不同的@media规则 - W3C has something on this - 虽然它是一个很大的Schroedinger的Cat，但是手持设备的浏览器是否会遵守规则，因此可以相当安全地假设，即使他们不这样做，他们也有足够大且比例很好的屏幕，只需使用桌面上出现的网站比例模型。

在我看来，设备制造商的最大利益是让它们与5到10年前这些设备出现之前的网站兼容。

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

Answer 4

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

图像的问题并不是那么大。你做的是以下几点：

以您希望拥有的最大尺寸上传图片。
使图像流畅如下：

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

在调整页面大小时，图像将以百分比宽度重新调整大小。只需确保图像中没有任何宽度或高度属性。我称之为超弹性：）

Answer 5

流畅的布局是浏览器中Responsive Design支持出来之前的答案。无需再使用流体或弹性布局。

Answer 6

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

任何“最佳实践”的集合都不会等同于实际的设计教育，并且并非所有用户都不得不将浏览器窗口吹到整个屏幕上。

Answer 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。

Answer 8

我认为最好有一个布局的最大宽度，你可以用Javascript改变它。一个很好的例子是这个布局，如果你改变宽度，看看在布局中发生了什么（在Firebug或其他什么）：http://tweakers.net/ 当浏览器的宽度发生变化时，他们选择宽度为1208像素并使用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;
}

使用流体布局是否明智？

8 个答案: