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

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包含媒体查询：http://www.emblematiq.com/global/main.css

Answer 3

main CSS file加载了媒体查询。

它使用CSS过渡使页面响应布局更改。

Answer 4

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

Answer 5

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

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