你什么时候选择固定的液体CSS布局?为什么?

时间:2012-01-31 13:04:01

标签: css fixed liquid-layout

我想知道你在编写css时有什么意见,何时/为何编码固定或液体样式表?

我同意固定尺寸样式表更容易/更快地编码,因为液体需要更多时间才能使所有元素都能很好地适应父母。

那么,你什么时候选择固定液体(反之亦然)?为什么?

4 个答案:

答案 0 :(得分:5)

更新2 我认为现在最好的做法是为任何屏幕尺寸设计一个具有响应和自适应功能的网站。 Liquid CSS可能没有您想到的陷阱,例如长行文本(而不是文本位置的即时调整) - 响应式设计的示例 - 页面的浏览器端代码适应任何屏幕尺寸:

自适应设计:托管站点的服务器检测请求页面的浏览器类型,并提供适当的页面布局,例如移动。这有一个缺陷,因为用户代理标识符并不总是精确的 - 例如例如,许多浏览器在其id中包含mozilla字符串,因此依赖此数据可能并不总是最好。

上一个回答

液体布局(水平收缩或拉伸以适合窗口水平宽度的布局)

  • 优点:内容重新格式化以充分利用 窗口宽度。这意味着选择最多的两难选择 流行的固定宽度不需要940px,960px或978px。这个 对于不同的小屏幕手持设备特别有用 略。考虑所有可能的屏幕,你必须做更少的工作 尺寸。

  • 缺点:由于网站缩小或拉伸到的原因 水平放置,你无法像固定一样控制布局 宽度。美观和网站看起来多么好看 控制。你可能会发现我的观点是不得不做更少的工作来支持所有的屏幕宽度毕竟是不正确的 - 因为在这里你正在考虑屏幕非常小的情况,你的菜单导航都是笨拙的,丑陋的或者太远了大屏幕

固定布局(固定布局,不会更改以适应可用的水平宽度)。

  • 优点:一旦您确定了最受欢迎的宽度,例如940px,960px等您不需要在不同的屏幕宽度下测试网站。布局整洁,东西不会四处移动,美观,外观看起来多么美好

  • 缺点:如果您的固定宽度较大,一些屏幕较小的用户,手持设备可能需要水平滚动才能查看您的网站。除非您也支持移动版,否则这些用户可以使用

浏览一下主要网站 - 他们使用的是什么。对我来说似乎固定宽度更受欢迎,包括stackoverflow.com

那就是说,看看这个流动的网站:http://derekallard.com/

在这里,开发人员通过使用在窗口中调整的网站宽度相互滑动的图形层来使用流体布局。

更新:没有错误或正确的答案。两者都有优点。从电视,电影和报纸进入网络的媒体人可能倾向于倾向于固定宽度,因为他们熟悉具有该功能的媒体。

答案 1 :(得分:3)

这不是技术问题,而是决策问题。 如果您(或客户)需要液体,您可以选择液体。

我自己也不想要液体。为什么?使用非常宽的窗口,您将获得很长的复制文本行,这些行难以阅读。

好的,还有一些其他部分你必须考虑。您的网页是否可以访问?然后你必须为缩放页面的那些制作一种液体布局。

您还可以寻找响应式网页设计。也可以在移动浏览器中使用 http://www.alistapart.com/articles/responsive-web-design/

答案 2 :(得分:2)

如果留下选择权,我很少在商业风格的网络应用程序中使用液体布局。

即。适用于客户坚持使用大量水平信息的应用。桌子,出于显而易见的原因,我将采用液体布局。对于更多标准网站,我会尽可能坚持修复。

当我为后者提供流动时,我大部分时间仍然会对复制文本强制执行最大宽度,因为我在政治上并不是特别正确,并且让网站为99%的访问者提供阅读的乐趣更多对我来说很重要,而不是让它成为一个(相对)微风 - 只要我保持对那些少数人的访问 ble 。就像yunzen所说,复制文本的行长非常对设计和可读性都很重要。不要让那些线条伸展到无穷远......

大多数情况下,我的固定布局网站将采用不同的方式来容纳较小的屏幕尺寸,而不仅仅是简单的液体拉伸 - 在文本下方移动侧边栏等,并可能调整复制文本宽度以适合设备视口。有时候,但并非总是如此,这需要css媒体查询。

(参见例如http://www.quirksmode.org/mobile/viewports2.html

答案 3 :(得分:0)

通常,固定布局更容易设计和开发,访问者也习惯于这种布局。

流体布局需要更多规划,也不适合各种Web应用程序。我不经常使用流体方法。