我一直更喜欢固定宽度的布局而不是流动宽度的布局,主要原因之一是我能够更好地理解整个画面的情况,而不必担心屏幕分辨率。
但现在“图片”已经改变,当今大多数用户使用的最低和最高分辨率之间存在很大差异,而且它们似乎会一直存在。
我的上网本只支持 800 像素或 1024 像素 宽度;我还有一个支持 1650 像素 的 22 英寸显示器,以及支持 1920 像素 和更多像素的 24 英寸显示器正变得越来越普遍。
一段时间以来,我几乎“忽略”了 800 像素的用户,并且我一直在使用固定的 950/960 像素宽度进行开发,我还注意到流行的网站(SO 为一个)要么使用这种方法,要么流动的。
对于(几乎)只有文本的网站(如 Wikipedia ),我认为使用流畅的系统没有问题,但是所有其他依赖图像/视频来创建有趣内容的网站呢?社交网络、分类广告等...他们(将)采用什么方法来解决这个问题?
Seam Carving在不久的将来似乎是一个不错的选择,但它还不够成熟(目前浏览器和 jQuery 都没有原生支持它),我也觉得用户不会理解它,对它感到困惑,因此放弃该网站。
事实上网络上的标准仍然是 1024 像素宽,而在 24"显示器中留下 980 像素未使用 不说错就显得很奇怪。< strong>那么我们有哪些选择?
我很想听听您对此有何看法,以及您对流动系统和固定系统的体验。
PS:也欢迎使用其中任何一种系统的热门网站,我对使用流体系统的非文本网站特别感兴趣。
编辑:我刚看到 this answer我对流体布局和液体布局之间的区别有点困惑,难道它们不应该完全相同吗?
最佳答案
我通常认为流体布局是个好主意。当您的流体布局开始在高分辨率屏幕上变得非常宽时,问题就开始了——人眼在不丢失垂直定位的情况下水平追踪的距离是有限的。这就是为什么报纸专栏总是相当狭窄的原因。
尝试在高分辨率屏幕上查看维基百科,您会发现它们将最大宽度限制在 800-900 像素左右 - 超过此值(假设是相当标准的 12pt 字体)并且人们不再能够阅读直到行尾,然后毫不费力地找到下一行的开头,整个事情就变成了眼部和颈部疲劳的一团乱麻。
在我构建的网站上,我使用 max-width 将文本内容(并且我还包括图像和其他内容)的最大宽度限制为大约 720-800px,其中带有侧边栏等可能会达到大约 1000px。如果屏幕比那个宽,那么可以将内容居中或左对齐(在 RTL 网站上右对齐)- 两者都可以正常工作。
但是你必须设计你的布局,以便它在可用宽度较窄时流动 - 这对于使用上网本(现在很流行,我预计将来会更流行)、智能手机和甚至是小屏幕移动设备。此类移动设备越来越多地配备标准浏览器,您应该在您的设计中解决这个问题——即使移动浏览器可以以某种方式减少您的网站,“移动模式”通常通过弄乱页面并破坏您预期的用户体验来做到这一点。
关于css - 使用流体布局是否明智?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1963041/