2012-01-31 34 views
4

我想知道你什么时候编码CSS的时候,什么时候/为什么编码固定或液体样式表的意见?你什么时候选择固定的液体CSS布局?为什么?

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

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

+0

很好的问题,但它可能有一个正确的答案:) – Shaheer 2012-01-31 13:51:01

回答

5

更新2我觉得现在最好的做法是设计一个网站与任何屏幕尺寸响应和适应能力。液体CSS可能没有你想像的那样的缺陷,比如长文本行(而不是文本位置块即时调整) - 响应式设计的例子 - 浏览器端代码,其中页面适应任何屏幕大小:

自适应设计:主机站点服务器检测到请求的PAG浏览器类型e并提供适当的页面布局,例如移动。这具有用户代理标识符不总是精确的缺陷 - 例如,例如,许多浏览器在他们的id中包含mozilla字符串,所以依靠这些数据可能并不总是最好的。

上一页答案

液体布局(布局在水平方向上收缩或延伸到适合的窗口的水平宽度)

  • 优点:内容格式化上飞充分利用 窗口宽度。这意味着选择最流行的固定宽度的最困难的例如 940px,960px或978px不是必需的。这个 对于稍微改变 的小屏幕手持设备特别有用。在考虑所有可能的屏幕尺寸时,你必须做更少的工作。

  • 缺点:由于网站将水平缩小或拉伸到 的原因,因此无法像固定的 宽度那样控制布局。在您的 控件下,美观和网站看起来不错。你可能会发现,我的观点是不得不做更少的工作来支持所有的屏幕宽度,毕竟这不是真的 - 因为在这里你正在考虑屏幕非常小并且你的菜单导航全部聚拢起来并且丑陋或者相距太远的场景大屏幕

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

  • 优点:一旦你确定了最流行的宽度,例如940像素,960像素等你不需要测试网站在不同的屏幕宽度。缺点:一些用户使用小屏幕,手持设备可能需要水平滚动才能查看您的网站,如果您的固定宽度较大。除非您也支持那些用户可以使用的移动版

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

这就是说,看看这个网站液:http://derekallard.com/

在这里,开发者使用流体布局,通过使用在每个滑动图形层获益其他作为您的窗口中调整的网站宽度。

更新:没有错误或正确的答案。两者都有优点。由电视,电影和报纸进入网络的媒体人士可能倾向于倾向于修正宽度,因为他们熟悉那些具有这种媒体的媒体。

+0

+1用于阐述答案及其细节。谢谢 – Alex 2012-01-31 13:29:13

3

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

我自己并不想要液体。为什么?有了非常宽的窗口,您将获得非常长的复印文本行,这些文本行很难阅读。

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

你也可以寻找响应式网页设计。也适用于移动浏览器。
http://www.alistapart.com/articles/responsive-web-design/

+0

这就是为什么我问,因为我的网页将需要访问,我想知道是否要选择液体 – Alex 2012-01-31 13:19:48

+0

+1 @yunzen“有一个非常宽的窗口,你会得到非常长的复制文本行,这是难以阅读。“ – therobyouknow 2012-01-31 13:21:30

+0

如果您有可访问的布局,您可以选择一个固定布局,其中包含一些“液体部分”。要实现的是,如果用户缩放(使用IE和FF的文本缩放)到200%,所有重要内容必须留在宽度大约为1000px的窗口中。这不是很容易实现,并取决于您的页面的总体布局。 – HerrSerker 2012-01-31 13:27:03

0

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

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

2

当有了选择,我很少在商业风格的网络应用程序以外的任何其他应用程序中使用液体布局。

I.e.对于客户在例如广告中坚持大量水平信息的应用程序表格,我会用明显的原因进行液体布局。对于更多标准的网站,如果可能,我会坚持使用固定的。

当我确实为后者流动时,我大多仍会对复制文本执行最大宽度,因为我在政治上不是特别正确,并且使网站成为阅读99%访问者的喜悦是对我来说比使它成为一种(相对)微风使用更重要 - 只要我保持它的访问权限即可。像yunzen说的,复制文本的行长度是非常重要的设计和可读性。不要让这些线条伸展到无穷远...

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

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

+0

+1这就是我在问这个问题时的想法,谢谢验证 – Alex 2012-01-31 15:27:36

相关问题