【问题标题】：How this web site achieves a fluid/liquid layout [closed]该网站如何实现流体/液体布局[关闭]
【发布时间】：2012-10-25 15:31:10
【问题描述】：

在这个网站www.emblematiq.com 中，布局是流体/液体。我正在查看代码，但似乎无法弄清楚它是如何实现的。看起来像一个固定宽度的布局，其中 canvas 元素的宽度为 1180 像素。

好像找不到

CSS 中的任何媒体查询。
宽度设置为 px 而不是 %。
涉及的 JavaScript/jQuery 似乎与它无关。

我确定我遗漏了一些明显的东西，但我终其一生都找不到负责的代码。

【问题讨论】：

标签： html css fluid-layout liquid-layout

【解决方案1】：

根据其源代码。我假设它是一个 css。

<link rel="stylesheet" href="/global/main.css" />

【讨论】：

Modernizr 仅有助于确定浏览器功能。 Respond 是一个用于媒体查询的 polyfill。
@Brad：是的！我就是这么想的。

【解决方案2】：

CSS 包含媒体查询：http://www.emblematiq.com/global/main.css

【讨论】：

【解决方案3】：

main CSS file 已加载媒体查询。

它使用 CSS 过渡使页面对布局更改做出如此好的响应。

【讨论】：

对。奇怪的媒体查询没有出现在 IE 开发者工具中。那好吧。新鲜/年轻的眼睛看得更清楚。
@Jawad - 开发者工具通常会过滤掉它忽略的东西（你也可以在 Firebug 中看到非 Firefox 供应商 CSS 发生这种情况）。在寻找这样的东西时，最好查看原始代码。

【解决方案4】：

本页面使用两个系统来实现“流畅的液体布局”：

Javascript

在main.js我们可以看到：

$(window).bind("smartresize", function( event ) {
    if($("#contactForm")[0]) {enableContact(); if($(window).width() >= 460){doContact();} else {undoContact();}}
    if($("body").hasClass("home")){setTitleHeight();}
});

smartresize 事件由jQuery smartresize plugin 带来，用于获取限制的resize 事件（以避免JS 引擎过载）。

此函数根据窗口宽度启用和禁用 UI 元素，并使用大量使用 jQuery 的自定义函数调整标题高度。

CSS `media` 选择器

在main.css我们可以看到，例如：

@media only screen and (max-width:1180px) {body{min-width:944px;}}
@media only screen and (max-width:944px) {body{min-width:708px;}}
@media only screen and (max-width:708px) {body{font-size:13px; min-width:472px;}}
@media only screen and (max-width:472px) {body{font-size:11px; line-height:15px; min-width:236px;}}

这些规则根据元素宽度设置不同的属性。

见w3.org/TR/css3-mediaqueries/

【讨论】：

【解决方案5】：

这属于“响应式网页设计”http://en.wikipedia.org/wiki/Responsive_web_design 的笼统说法。正如文章所解释的，有多种方法可以实现它。您的网站可能更适合特别是其中一种方法。

【讨论】：

Javascript

CSS media 选择器

CSS `media` 选择器