什么是液体布局？

Posted 2023-03-17

【中文标题】什么是液体布局？

【英文标题】：What's a liquid layout?

【发布时间】：2010-09-08 21:45:11

【问题描述】：

我的设计师一直在抛弃术语“液体”布局。这是什么意思？

感谢您的澄清，我一直只是将其称为百分比布局，并认为他是在说棋子可以移动，这是流动的

【参考方案1】：

“流动”布局是一种网站布局，它会随着浏览器窗口大小的调整而扩展以填充整个可用区域。通常这是使用 CSS 完成的。流动布局对于某些类型的网站可能非常有用，但它们也往往比固定宽度布局更费力，而且它们的实用性取决于网站内容和它们的实施情况。

【讨论】：

Pedantry: '“流动”布局是一种相对于浏览器窗口宽度水平伸展或收缩的网站布局'。我认为重要的是要指出它是相关的 width，并且它没有 必须 完全填满可用区域。

【参考方案2】：

来自http://www.maxdesign.com.au/presentation/liquid/：

页面上的所有容器都有自己的 以百分比定义的宽度 - 含义 它们完全基于 视口而不是初始 包含块。液体布局将 调整大小时进出 浏览器窗口。

【参考方案3】：

基本上，它是一种网页布局，不依赖于页面中元素的特定宽度规范。

查看Wikipedia的讨论。

【参考方案4】：

这意味着一种布局可以动态调整到浏览器（或任何客户端）的宽度和高度，以有效利用所有可用的屏幕空间，而不是（大多数）固定宽度的布局，以适应共同的分母分辨率在那个特定的时间（例如，800x600 多年来一直是网站的标准）。

【参考方案5】：

看到这个： http://www.time-tripper.com/uipatterns/Liquid_Layout

【讨论】：

链接不错，但是网站已经迁移到designinginterfaces.com/Liquid_Layout

【参考方案6】：

Liquid Layouts 是指网站的设计理念。由于 CSS 中有百分比和相对宽度，因此当您调整浏览器窗口大小时，液体布局会移入和移出。

【参考方案7】：

这只是意味着它会收缩/扩展以填充浏览器的窗口大小（通常是宽度），如果事情做得好，直到某个点。否则，在大型 (24"+) 显示器上，文本可能很难阅读。

【参考方案8】：

两个之一：

设计将缩放到浏览器的宽度（例如，如果浏览器是 1024 像素宽，那么设计也会如此）......尽管在为 100 像素宽的浏览器设计时这确实很有趣（有时设计师实际上会设置一个最小宽度）。

设计具有固定宽度，但在测量中使用相对大小进行设置...例如“em”...因此，随着字体大小的增加，页面的宽度也会增加。

【参考方案9】：

流式布局是一种 CSS 布局方法，它以百分比定义所有宽度，因此当视口（浏览器窗口）调整大小时，页面区域会扩大/缩小。

如果尝试创建一个既适合大屏幕又适合小屏幕的网站，它们非常有用。它们比固定布局更难处理，因为您放弃了对页面中所有内容如何适应的一些级别控制，并且您必须非常关注您的内容，以确保它不会掉落在调整大小时美观地分开。

我会说流动布局对于具有相当基本的列布局的文本重的网站最有用。您可能还会发现一种具有“弹性”布局的令人愉悦的介质——一种同时具有流动区域和固定区域的介质。

【参考方案10】：

在真正的 Liquid 布局中，您的内容会以有意义、经过计算和智能的方式扩展和收缩以适应用户的浏览器窗口。因此，它不仅仅是将列和容器宽度设置为百分比。

做得好，这可以提高感知质量。做得不好，这是一个可用性的噩梦。

去液体是一个巨大的痛苦臀部。如果您正在构建网站的主题/客户/产品对他们有很强的视觉质量（想想夏季大片电影网站），需要一定的配合和完成，或者如果它需要显示，那么痛苦是值得的大量数据。

注意：稍后我将更新此内容，并提供指向我的主张的优秀示例和引用的链接