你什么时候选择液体 CSS 布局而不是固定的？为什么？
我想知道您对 css 编码、何时/为什么编码固定或液体样式表有什么看法？
我同意固定大小的样式表更容易/更快地编码，因为液体需要更多的时间才能让所有元素很好地适应它们的父母。
那么，您什么时候选择液体而不是固定的（反之亦然）？为什么？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
更新2 我认为现在的最佳实践是设计一个具有针对任何屏幕尺寸的响应和自适应功能的网站。 Liquid CSS 可能没有您认为的陷阱，例如长行文本（而不是文本位置的块动态调整） - 响应式设计的示例 - 浏览器端代码在页面中适应任何屏幕尺寸：
设计：托管站点的服务器检测请求页面的浏览器类型并提供适当的页面布局，例如移动设备。这存在缺陷，因为用户代理标识符并不总是精确的 - 例如，许多浏览器在其 id 中包含 mozilla 字符串，因此依赖此数据可能并不总是最好的。
上一个答案
液体布局（水平收缩或拉伸以适应窗口水平宽度的布局）
优点：内容会动态重新格式化，以充分利用
窗户宽度。这意味着选择最多的困境
不需要流行的固定宽度，例如 940px、960px 或 978px。这
对于不同的小屏幕手持设备特别有用
轻微地。您需要做更少的工作来考虑所有可能的屏幕
优点
缺点：由于网站会收缩或拉伸
水平适合，您无法像固定一样控制布局
宽度。美学和网站的美观程度将不那么受您的重视
控制。您可能会发现，我关于必须做更少的工作来支持所有屏幕宽度的观点毕竟是不正确的 - 因为在这里您正在考虑屏幕非常小的场景，并且您的菜单导航全部挤在一起且丑陋或相距太远。大屏幕
固定布局（固定布局，不会更改以适应可用的水平宽度）。
优点：一旦您确定了最流行的宽度，例如 940px、960px 等，您就不需要在不同的屏幕宽度下测试网站。布局整洁，东西不会移动，美观，东西看起来有多漂亮保持不变
缺点：如果您的固定宽度较大，一些屏幕较小的用户，手持设备可能需要水平滚动才能查看您的网站。除非您也支持那些用户可以使用的移动版本
请查看主要网站 - 他们正在使用什么。对我来说，固定宽度似乎更受欢迎，包括 stackoverflow.com
也就是说，看看这个流畅的网站： http://derekallard.com /
在这里，开发人员通过使用随着窗口中网站宽度调整而相互滑动的图形层来利用流体布局。
更新：没有错误或正确的答案。两者各有优点。从电视、电影和报纸进入网络的媒体人员可能倾向于喜欢固定宽度，因为他们熟悉那些具有固定宽度的媒体。
Update 2 I think the best practice now is design a site with responsive and adaptive capabilities for any screen size. Liquid CSS may not have the pitfalls that you would think such as long lines of text (instead the block of text position adjusts on-the-fly) - examples of Responsive Design - browser-side code where pages adapt to any screensize:
Adaptive design: server hosting the site detects browser type that requested the page and serves up appropriate page layouts e.g. mobile. This has pitfalls in that the user agent identifiers aren't always precise - e.g. many browsers include the mozilla string in their id, for example, so it might not always be best to rely on this data.
Previous answer
Liquid layouts (layouts that horizontally shrink or stretch to fit the horizontal width of a window)
Advantages: the content reformats on the fly to fully utilise the
Window width. Which means that the dilemma of choosing the most
popular fixed width e.g. 940px, 960px or 978px is not required. This
is particularly useful for small screen handheld devices which vary
slightly. You have to do less work in considering all possible screen
sizes.
Disadvantages: For the reason that the site will shrink or stretch to
fit horizontally, you cannot control the layout as much as fixed
width. Aesthetics and how nice the site looks will be less under your
control. You may find that my point about having to do less work to support all screen widths is not true after all - as here you are considering scenarios where the screen is really small and your menu navigation is all bunched up and ugly or too far apart on a large screen
Fixed layouts (layouts that are fixed and don't change to fit the available horizontal width).
Advantages: Once you have settled on the most popular width e.g. 940px, 960px etc. you would not need to test the site at different screen widths. The layout is neat and things don't move around, aesthetics, how nice things look remains constant
Disadvantages: Some users with small screens, handhelds may need to scroll horizontally to view your site if your fixed width is larger. Unless you also support a mobile edition too that those users can use
Have a look around at major sites - what are they using. To me it seems fixed widths are more popular, including stackoverflow.com
That said, look at this fluid site: http://derekallard.com/
Here, the developer uses fluid layouts to advantage by using layers of graphics that slide over each other as the site width adjusted in your window.
update: There is no wrong or right answer. Both Have merits. Media folk who have come from television, film and newspaper into web may tend to favour fix widths owing to their familiarity with those media having that.
这不是技术问题，而是决策问题。
如果您（或客户）想要液体，您可以选择液体。
我自己不想要液体。为什么？如果窗口非常宽，您会看到很长的文本行，很难阅读。
好的，您还必须考虑其他一些部分。您的页面是否旨在易于访问？然后，您必须为缩放页面的布局制作一种液体布局。
您还可以寻找响应式网页设计。也适用于移动浏览器。
http://www.alistapart.com/articles/responsive-web-design/
It's not a matter of technique, it's a matter of decision making.
You choose liquid if you (or the client) WANT liquid.
I myself do NOT WANT liquid. Why? With a very wide window you get very long copy text lines, which are hard to read.
OK there are some other parts you must consider. Is your page intended to be accessible? Then you have to make a sort of liquid layout for the ones which zoom the page.
You could also look for responsive web design. The one that works in mobile browsers, too.
http://www.alistapart.com/articles/responsive-web-design/
当我有选择时，除了商务风格的网络应用程序之外，我很少在任何东西中使用液体布局。
即，对于客户坚持在表格中提供大量水平信息的应用程序，出于显而易见的原因，我将采用液体布局。对于更标准的网站，如果可能的话，我会坚持使用固定的。
当我确实选择后者时，我仍然会在复制文本上强制执行最大宽度，因为我在政治上并不是特别正确，并且让网站成为 99％ 的访问者阅读的乐趣对我来说更重要而不是让少数人（相对）轻松地使用它 - 只要我让少数人可以使用它。正如 yunzen 所说，文案文本的行长对于设计和可读性来说非常都很重要。不要让这些线条延伸到无穷大...
大多数情况下，我的固定布局网站将有不同的方式来适应较小的屏幕尺寸，而不仅仅是简单的液体拉伸 - 移动侧边栏等在文本下方，并可能调整复制文本宽度以适合设备视口。有时，但并非总是，这需要 CSS 媒体查询。
（参见例如http://www.quirksmode.org/mobile/viewports2.html）
When left with a choice, I rarely use liquid layout in anything except business style web apps.
I.e. for apps where the customer insists on lots of horizontal information in e.g. tables, I'll go with a liquid layout for obvious reasons. For more standard websites, I'll stick with fixed if at all possible.
When I do go liquid for the latter, I'll mostly still enforce a max-width on copy text, because I'm not particularly politically correct, and making the site a joy to read for 99% of visitors is more important to me than making it a (relative) breeze to use for a few - as long as I keep it accessible to those few. Like yunzen says, line length of copy text is very important to both design and readability. Don't let those lines stretch to infinity...
Mostly, my fixed layout sites will have different ways of accomodating the smaller screen size rather than just simple liquid stretching - moving side bars and such beneath the text, and possibly adjusting the copy text width to fit the device viewport. Sometimes, but not always, that requires css media queries.
(see e.g. http://www.quirksmode.org/mobile/viewports2.html)
通常固定布局更容易设计和开发，访客也习惯这种布局。
流体布局需要更多的规划，也不适合所有类型的 Web 应用程序。我不经常使用流动方法。
Usually fixed layouts are easier to design and develop, also visitors are used to this kind of layout.
Fluid layouts need more planning and also do not fit in all kinds of web application. I do not use the fluid approach very often.