什么是液体布局？

题

我的设计师不断地抛出“液体”布局这个术语。这是什么意思？

感谢您的澄清，我一直只是将其称为百分比布局，并认为他是说这些部件可以四处移动，这是流动的

解决方案

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

其他提示

页面上的所有容器均在Percents中定义其宽度 - 这意味着它们完全基于视口，而不是初始包含块。调整浏览器窗口大小时，液体布局将进出。

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

请参阅以下位置的讨论：维基百科.

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

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

它只是意味着如果事情做得好的话，它将收缩/扩展以填充浏览器的窗口大小（通常是宽度），直到一定程度。否则，在大型（24 英寸以上）显示器上文本可能会很难阅读。

两者之一：

设计将缩放到浏览器的宽度（例如，如果浏览器是 1024px 宽，设计也会如此）...尽管在为 100px 宽的浏览器进行设计时这确实很有趣（有时设计师实际上会设置最小宽度）。
该设计具有固定宽度，但使用相对尺寸进行测量...例如“em”...因此，随着字体大小的增加，页面的宽度也会增加。

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

如果尝试创建一个同时适合大屏幕和小屏幕的网站，它们非常有用。它们比固定布局更难操作，因为你放弃了对所有内容如何适合页面的某种程度的控制，并且你必须非常密切地关注你的内容，以确保它不会掉落调整大小时在美观上分开。

我想说，液体布局对于具有相当基本的列布局的文本密集的网站最有用。您可能还会发现一种具有“弹性”布局的快乐媒介——既具有流动区域又具有固定区域的媒介。

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

如果做得好，这可以提高感知质量。如果做得不好，这将是一场可用性噩梦。

流质对臀部来说是一个巨大的痛苦。不过，如果您正在构建网站的主题/客户/产品具有很强的视觉质量（想想夏季大片网站），需要一定的配合和完成，或者需要展示，那么这种痛苦是值得的大块数据。

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

许可以下： CC-BY-SA 和归因