本网站如何实现流体/液体布局

Question

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

似乎无法找到

1. 在CSS任何媒体查询。
2. 宽度设置为px而不是％。
3. 涉及的JavaScript/jQuery似乎并没有与它相关。

我相信我失去了一些东西明显，但对我的生活找不到负责的代码吧。

Answer 1

本页面使用两个系统，以实现 “流体流式布局”：

的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带来的，用于获取调整大小的事件（以避免重载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/

Answer 2

根据其源代码。我认为这是一个CSS。

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

Answer 3

的CSS是挤满了媒体的质疑：http://www.emblematiq.com/global/main.css

Answer 4

的main CSS file装有媒体查询。

它使用CSS转换来使页面对布局更改做出很好的响应。

Answer 5

这来了模棱两可的话 “有求必应网页设计” http://en.wikipedia.org/wiki/Responsive_web_design下。正如文章解释的那样，实现它有多种方式。特别是您的网站可能更适合其中一种方法。