液体布局仍然相关吗？

Posted 2023-03-17

【中文标题】液体布局仍然相关吗？

【英文标题】：Are liquid layouts still relevant?

【发布时间】：2010-09-08 21:41:37

【问题描述】：

现在大多数主流浏览器都支持整页缩放（目前唯一值得注意的例外是 Google Chrome），是否不再需要流动或弹性布局？构建液体/弹性布局的相对痛苦值得付出努力吗？是否存在液体布局仍然有益的情况？整页缩放是最初看起来的真正解决方案吗？

【问题讨论】：

自 2008 年以来，随着响应式网页设计的出现和移动设备的兴​​起，事情发生了惊人的变化。今天一个更好的问题是：固定布局仍然相关吗？ :-)

【参考方案1】：

是的，因为那里有各种各样的屏幕，通常从 15 英寸到 32 英寸不等。 人们认为“舒适”的字体大小也有一些变化。 所有这些加起来构成了您的内容需要适应的各种尺寸。

如果有的话，随着我们扩展到大型显示器并缩小到手机设备，流动布局变得更加必要。

【讨论】：

整页缩放肯定是解决不同屏幕尺寸问题的更好解决方案？

... 以及用于非常小型设备（例如手机）的替代样式表。

另一点值得牢记的是，整页缩放还会缩放图形元素，在我看来，这会在更大的显示器上创造更实用的体验。

【参考方案2】：

在 CSS 中进行整页缩放并不值得，尤其是现在大多数浏览器都原生进行这种缩放（并且做得更好 - ref [img] 标签）。

至于使用固定宽度，还有一个次要的特性……如果你增加字体大小，每行显示的单词会更少，这可以帮助一些人阅读。

例如，您是否曾经读过一段非常宽的文本，却发现同一行读了两次？如果增加行高（虽然字体大小相同），每行字数减少，这将不再是一个问题。

【讨论】：

你的意思是，“在 CSS 中做 liquid layouts 真的不值得吗？”

不，液体布局是指浏览器窗口可以重新调整大小并且内容更改布局以匹配...这更多的是关于固定宽度，在以像素为单位设置内容宽度或嗯。我仍然更喜欢以 px 为单位设置主页宽度（不随字体大小而变化），但在页面上较小的元素上使用 em，因为这允许每行的字数随着文本大小的增加而改变（当浏览器更改文本大小，而不是缩放整个页面，现在大多数情况下似乎都是默认这样做的，因此此方法允许两种样式，而不是尝试复制）。

【参考方案3】：

是的，是的！因为一些设计师认为用户总是最大化他们的浏览器而不得不在网站上水平滚动对我来说是一个巨大的烦恼，我相信我并不孤单。最重要的是，作为一个视力很差的人，让我说当布局是流动的时，整页缩放效果最好。否则，您的导航栏会离开（可见）屏幕。

【参考方案4】：

我对此有一个现实世界的问题。该设计要求在漂亮的边框内有一个固定宽度的页面。适合浏览器窗口的 800 像素宽减去几个像素。左侧菜单减去 200 像素，内容区域宽约 600 像素。

问题是，部分网站内容是动态的，导致用户在其漂亮的 1280x1024 屏幕上编辑和浏览表格中的数据，表格宽度限制为 600 像素。

您应该在动态内容中允许浏览器窗口的宽度，除非该动态内容主要是文本。

【参考方案5】：

拉伸布局与其说是缩放，不如说是换行——如果屏幕分辨率较高，用户可以在屏幕上显示更多信息，同时仍然让分辨率较低的用户可以访问内容。页面缩放无法实现这一点。

【讨论】：

好点，但在屏幕上显示更多信息并不总是一件好事。较长的行阅读起来会很不舒服。优秀的设计师通常会指定最大宽度以防止线条变得太长。

是的，我总是在我的弹性布局中使用 max-width 属性。它得到了很好的支持，可以防止在高分辨率显示器上出现异常宽泛的情况。

哈哈哈，支持！ =/ IE + 怪癖模式，厄运和悲观... +_+

【参考方案6】：

我认为仍然需要流式布局，尽管浏览器具有全页缩放功能，但我敢打赌很多人不知道或不知道如何使用它。

【讨论】：

我同意约翰·博克的观点。不是每个人都知道这件事。我支持关于屏幕尺寸的概念。有些人正在使用小分辨率。但与此同时，有些人正在使用非常高的分辨率。

一般来说，它是现在人们使用缩放时的默认功能，而不仅仅是文本缩放。但是，您会惊讶于有多少人甚至不知道您可以在浏览器中缩放文本。

【参考方案7】：

从可访问性的角度来看，页面缩放可怕。这相当于说“我们无法正确设计我们的页面[设计师]，所以使用更大的字体并水平滚动页面[浏览器开发人员]”。我不敢相信 Firefox 在 Microsoft 之后跳下悬崖并将其设为默认值。

【讨论】：

FireFox 2.x 缩放的问题是它只影响文本；如果您有带有文本的图像，则图像保持相同的大小。新行为以需要滚动为代价同时缩放文本和图像。

有一些方法可以解决这个问题：例如，您可以以 em 单位指定图像尺寸。在某些情况下，您可能希望不调整图像大小，这比不希望调整文本大小更合理。

【参考方案8】：

是的 - 您不知道阅读器使用的分辨率或屏幕尺寸 - 或者即使需要/使用辅助功能。如上所述，并不是每个人都知道整页缩放 - 我知道，但几乎不使用它...

【参考方案9】：

只有您自己网站的访问者才能告诉您流动布局是否仍然与您的网站相关。

使用诸如 YUI-CSS 和 Google 网站优化器之类的框架，很容易看到您的访问者喜欢什么并搁置意见，而是依赖冷硬的结果。

【参考方案10】：

不过，液体布局可能会导致可用性问题。

变得太宽的内容容器变得异常难以阅读。

出于这个原因，许多博客都有固定宽度的内容容器。

或者，您可以创建多列内容容器，以便获得像报纸一样的效果，其中包含多列细小的文本容器。不过，这可能很难做到。