1

我刚开始学习响应式 CSS 框架，所以我想自己比较 Foundation 4、Gumby 和 Bootstrap。

我可以运行 Foundation 4 和 Bootstrap，但 Gumby 不起作用。

我包含框架的文件，并且网络不会停止加载。我尝试删除一些行，问题是包括 gumby.css

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/gumby.css">
        <title>
            Title
        </title>
    </head>
    <body>
        asd
    </body>
</html>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/libs/gumby.min.js">
</script><script type="text/javascript" src="js/libs/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/libs/modernizr-2.6.2.min.js"></script>

问题可能是我一直包含错误的文件，可以吗？

4

3 回答 3

1

我很清楚你的问题是什么。您需要在实时 Web 服务器上运行它，或者将//href 设置http://在 index.html 和 css/gumby.css 中，否则 jquery/自定义字体 http 请求将永远超时，并且回退到本地版本会发生.

编辑：我看到你已经从 Gumby 的默认模板文件中删除了很多代码行。我会使用它们，否则你会在浏览器中遇到大量的不一致。这是我使用的代码：

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" itemscope itemtype="http://schema.org/Product"> <!--<![endif]-->
<head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <title>Gumby - A Flexible, Responsive CSS Framework - Powered by SASS</title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="humans.txt">

    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">

    <link rel="stylesheet" href="css/gumby.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="js/libs/modernizr-2.6.2.min.js"></script>
</head>

<body>



    <script>
    var oldieCheck = Boolean(document.getElementsByTagName('html')[0].className.match(/\soldie\s/g));
    if(!oldieCheck) {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"><\/script>');
    } else {
    document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"><\/script>');
    }
    </script>
    <script>
    if(!window.jQuery) {
    if(!oldieCheck) {
      document.write('<script src="js/libs/jquery-2.0.2.min.js"><\/script>');
    } else {
      document.write('<script src="js/libs/jquery-1.10.1.min.js"><\/script>');
    }
    }
    </script>

    <script src="js/libs/gumby.min.js"></script>
    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

    <script>
    window._gaq = [['_setAccount','UAXXXXXXXX1'],['_trackPageview'],['_trackPageLoadTime']];
    Modernizr.load({
      load: ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
    });
    </script>

    <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
    <![endif]-->

  </body>
</html>
于 2013-12-05T13:42:07.157 回答
0

下载并解压文件时，查看主文件夹中的demo.html文件，其中包含包含的 css 和主要 js 库的完整示例，IE 问题的一些验证以及注释的 js 模块，可以添加。

于 2013-07-30T05:12:00.190 回答
0

尝试将modernizr 移动到文档的头部，并将jquery 放在main 和gumby.js 文件的上方

我不太确定“网络不会停止加载”是什么意思，但我认为这与 JS 被阻止有关。

您可能还想在脑海中记住以下内容。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
于 2013-06-23T20:04:46.013 回答