【问题标题】:When do you choose liquid CSS layouts over fixed? Why?你什么时候选择流动的 CSS 布局而不是固定的?为什么?
【发布时间】:2012-01-31 13:04:00
【问题描述】:

我想知道您对 css 编码、何时/为什么编码固定或流动样式表有什么看法?

我同意固定大小的样式表更容易/更快地编写代码,因为 Liquid 需要更多时间才能使所有元素很好地适应其父级。

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

【问题讨论】:

  • 好问题,但它可能有一个正确的答案:)

标签: css fixed liquid-layout


【解决方案1】:

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

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

上一个答案

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

  • 优势:动态重新格式化内容以充分利用 窗口宽度。这意味着选择最 流行的固定宽度,例如940px、960px 或 978px 不是必需的。这 对于不同的小屏幕手持设备特别有用 轻微地。在考虑所有可能的屏幕时,您必须做更少的工作 尺寸。

  • 缺点:因为网站会收缩或伸展到 水平放置,您无法像固定的那样控制布局 宽度。美学和网站的美观程度在您的控制下将不那么重要 控制。你可能会发现我关于必须做更少的工作来支持所有屏幕宽度的观点是不正确的 - 因为在这里你正在考虑屏幕非常小并且你的菜单导航都聚集在一起并且丑陋或相距太远的场景大屏幕

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

  • 优势:一旦您确定了最流行的宽度,例如940px、960px 等,您不需要在不同的屏幕宽度下测试网站。布局整洁,东西不动,美观,东西看起来有多漂亮保持不变

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

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

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

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

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

【讨论】:

    【解决方案2】:

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

    我自己不想要液体。为什么?如果窗口很宽,您会得到很长的复制文本行,难以阅读。

    好的,您还必须考虑其他一些部分。您的页面是否可以访问?然后你必须为缩放页面的布局做一种流动的布局。

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

    【讨论】:

    • 这正是我要问的原因,因为我的页面需要可访问,我想知道是否选择液体
    • +1 @yunzen "如果窗口很宽,你会得到很长的复制文本行,很难阅读。"
    • 如果您有可访问的布局,您可以选择其中包含一些“流动部分”的固定布局。要实现的是,如果用户缩放(使用 IE 和 FF 的文本缩放)到 200%,所有重要内容必须留在宽度约为 1000 像素的窗口内。这不是很容易实现,并且取决于您页面的整体布局。
    【解决方案3】:

    当我不得不选择时,我很少在除商务风格的网络应用程序之外的任何东西中使用流动布局。

    即对于客户坚持大量横向信息的应用程序,例如表,出于显而易见的原因,我将使用流动布局。对于更标准的网站,如果可能,我会坚持使用固定的。

    当我确实为后者提供流动性时,我大多仍会在复制文本上强制执行最大宽度,因为我在政治上并不是特别正确,让 99% 的访问者阅读该网站更有趣对我来说,重要的是让少数人使用它(相对)轻而易举 - 只要我保持它对那些少数人访问ble。正如yunzen 所说,复制文本的行长非常对设计和可读性都很重要。不要让这些线条延伸到无穷远......

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

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

    【讨论】:

    • +1 这就是我提出问题时的想法,感谢您的验证
    【解决方案4】:

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

    流畅的布局需要更多的规划,也不适合所有类型的 Web 应用程序。我不经常使用流体方法。

    【讨论】:

      猜你喜欢
      • 2010-09-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2011-11-23
      • 2010-09-20
      相关资源
      最近更新 更多