我的设计师一直在抛弃术语“液体”布局。这是什么意思?
感谢您的澄清,我一直只是将其称为百分比布局,并认为他是在说这些碎片可以移动,那是流动的
“液体”布局是一种站点布局,随着浏览器窗口大小的调整,它会扩展以填充整个可用区域。通常这是使用 CSS 完成的。流动布局对于某些类型的网站非常有帮助,但它们也往往比固定宽度布局要付出更多的努力,而且它们的有用性取决于网站内容和它们的实施情况。
来自http://www.maxdesign.com.au/presentation/liquid/:
页面上的所有容器的宽度都以百分比定义——这意味着它们完全基于视口而不是初始包含块。当您调整浏览器窗口的大小时,流动布局将移入和移出。
基本上,它是一种网页布局,不依赖于页面中元素的特定宽度规范。
请参阅Wikipedia上的讨论。
这意味着一种布局可以动态调整到浏览器(或任何客户端)的宽度和高度,以有效利用所有可用的屏幕空间,而不是(大部分)固定宽度的布局,以适应特定的公分母分辨率时间(例如 800x600 多年来一直是网站的标准)。
Liquid Layouts 指的是网站的设计理念。当您调整浏览器窗口的大小时,液体布局将移入和移出,因为 CSS 中有百分比和相对宽度。
它只是意味着它会收缩/扩展以填充浏览器的窗口大小(通常是宽度),如果事情做得好,直到某个点。否则,在大型 (24"+) 显示器上,文本可能很难阅读。
两种之一:
设计将缩放到浏览器的宽度(例如,如果浏览器是 1024 像素宽,那么设计也会如此)......尽管在为 100 像素宽的浏览器设计时这确实很有趣(有时设计师实际上会设置一个最小宽度)。
该设计具有固定宽度,但使用相对大小进行测量设置......例如“em”......因此,随着字体大小的增加,页面的宽度也会增加。
液体布局是 CSS 布局的一种方法,它以百分比定义所有宽度,因此当调整视口(浏览器窗口)的大小时,页面的区域将扩大/缩小。
如果尝试创建一个既适合大屏幕又适合小屏幕的网站,它们非常有用。它们比固定布局更难处理,因为您放弃了对页面中所有内容如何适应的一些级别控制,并且您必须非常关注您的内容,以确保它不会掉落在调整大小时在美学上分开。
我想说流动布局对于具有相当基本的列布局的文本繁重的网站最有用。您可能还会发现一种具有“弹性”布局的快乐媒介——一种同时具有流动区域和固定区域的媒介。
在真正的 Liquid 布局中,您的内容会以一种有意义、经过计算和智能的方式扩展和收缩以适应用户的浏览器窗口。因此,它不仅仅是将列和容器宽度设置为百分比。
做得好,这可以提高感知质量。做得不好,这是一个可用性的噩梦。
变液体是臀部的巨大痛苦。如果您正在构建网站的主题/客户/产品对他们有很强的视觉质量(想想夏季大片电影网站),需要一定的配合和完成,或者如果它需要显示,那么痛苦是值得的大块数据。
注意:稍后我将通过链接到我的主张的好例子和引用来更新它