0

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

好像找不到

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

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

4

5 回答 5

3

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

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 插件带来，用于获取限制的调整大小事件（以避免 JS 引擎过载）。

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

CSSmedia选择器

在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/

于 2012-11-05T18:45:23.507 回答
2

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

于 2012-11-05T18:37:39.820 回答
2

主CSS 文件加载了媒体查询。

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

于 2012-11-05T18:38:36.413 回答
1

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

于 2012-11-05T19:15:48.203 回答
0

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

<link rel="stylesheet" href="/global/main.css" />
于 2012-11-05T18:36:37.210 回答