css - 使用流体布局是否明智?

标签 css fixed fluid

Google Labs Browser Size


我一直更喜欢固定宽度的布局而不是流动宽度的布局,主要原因之一是我能够更好地理解整个画面的情况,而不必担心屏幕分辨率。

但现在“图片”已经改变,当今大多数用户使用的最低和最高分辨率之间存在很大差异,而且它们似乎会一直存在。

我的上网本只支持 800 像素或 1024 像素 宽度;我还有一个支持 1650 像素 的 22 英寸显示器,以及支持 1920 像素 和更多像素的 24 英寸显示器正变得越来越普遍。

一段时间以来,我几乎“忽略”了 800 像素的用户,并且我一直在使用固定的 950/960 像素宽度进行开发,我还注意到流行的网站(SO 为一个)要么使用这种方法,要么流动的。

对于(几乎)只有文本的网站(如 Wikipedia ),我认为使用流畅的系统没有问题,但是所有其他依赖图像/视频来创建有趣内容的网站呢?社交网络、分类广告等...他们(将)采用什么方法来解决这个问题?

Seam Carving在不久的将来似乎是一个不错的选择,但它还不够成熟(目前浏览器和 jQuery 都没有原生支持它),我也觉得用户不会理解它,对它感到困惑,因此放弃该网站。

事实上网络上的标准仍然是 1024 像素宽,而在 24"显示器中留下 980 像素未使用 不说错就显得很奇怪。< strong>那么我们有哪些选择?

screen resolutions with fixed layout

我很想听听您对此有何看法,以及您对流动系统和固定系统的体验。

PS:也欢迎使用其中任何一种系统的热门网站,我对使用流体系统的非文本网站特别感兴趣。


编辑:我刚看到 this answer我对流体布局和液体布局之间的区别有点困惑,难道它们不应该完全相同吗?

最佳答案

我通常认为流体布局是个好主意。当您的流体布局开始在高分辨率屏幕上变得非常宽时,问题就开始了——人眼在不丢失垂直定位的情况下水平追踪的距离是有限的。这就是为什么报纸专栏总是相当狭窄的原因。

尝试在高分辨率屏幕上查看维基百科,您会发现它们将最大宽度限制在 800-900 像素左右 - 超过此值(假设是相当标准的 12pt 字体)并且人们不再能够阅读直到行尾,然后毫不费力地找到下一行的开头,整个事情就变成了眼部和颈部疲劳的一团乱麻。

在我构建的网站上,我使用 max-width 将文本内容(并且我还包括图像和其他内容)的最大宽度限制为大约 720-800px,其中带有侧边栏等可能会达到大约 1000px。如果屏幕比那个宽,那么可以将内容居中或左对齐(在 RTL 网站上右对齐)- 两者都可以正常工作。

但是你必须设计你的布局,以便它在可用宽度较窄时流动 - 这对于使用上网本(现在很流行,我预计将来会更流行)、智能手机和甚至是小屏幕移动设备。此类移动设备越来越多地配备标准浏览器,您应该在您的设计中解决这个问题——即使移动浏览器可以以某种方式减少您的网站,“移动模式”通常通过弄乱页面并破坏您预期的用户体验来做到这一点。

关于css - 使用流体布局是否明智?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1963041/

相关文章:

javascript - 如何使用 jquery 更改 'this' 类的 css 样式?

html - 获得两个其他固定元素之间的固定元素的最大可能高度

namespaces - 未找到 ViewHelper

css - 边栏高度等于主要内容区域

jquery - 我可以淡入背景图像吗(CSS : background-image) with jQuery?

jQuery UI 选项卡插件无法处理 2 层选项卡

javascript - 使用javascript在浏览器调整大小时更改背景css

c# - 修复 C# 中的数组数组(不安全代码)

javascript - CSS 位置 :fixed &lt;script&gt; tag within does not stay fixed

php - 在 PHP 中仅获取一次 MySql-Query 列作为标题(即使有多个结果)