javascript - Modernizr + Yepnope + FitText（不同的字体大小/不同视口的缩放）

Question

首先，我对 JS 很垃圾——一个新手。

我想要做的是针对不同的设备宽度有不同的 FitText (jquery.fittext.js) 缩放。例如：

$("#hometitle").fitText(1.1); // for mobile

$("#hometitle").fitText(1.2); // for medium screen

$("#hometitle").fitText(1.2); // for large screen

我知道我可以像这样使用 YepNope（在我的 HTML 文档的底部）：

<script type="text/javascript">
Modernizr.load([
    {
        test: Modernizr.mq('(max-width:600px)'),
        yep: '{js_path}mobile.js'
    }
]);
</script>

然后在mobile.js里面我有这个：

$(document).ready(function() { 
    { 
        $("#hometitle").fitText(1.2);
    }
});

我想（绝望地！）知道 [a] 我得到上面的代码了吗？和 [b] 我如何为 YepNope 代码（上图）添加三个宽度的额外测试。

再次抱歉，我对 JS 没用！并且有一个项目需要尽快利用这个。

（旁注：Modernizr 正在加载，在我的 YepNope 代码 jQuery 和 fittext 加载之前的页面底部）

提前致谢！

Answer 1

对我来说，你似乎是在正确的轨道上。使用 yepnope.js 和 modernizr 来制作 polyfill。

尽管您缺少一些东西，例如首先检查浏览器是否支持媒体查询，以及在查询中使用设备类型。通过最小宽度和最大宽度指定范围也是一个好主意，因为如果不这样做，测试条件可能会加载多个 javascript 文件。

至于多个条件，你可以这样做，

Modernizr.load([

    {
        test: Modernizr.mq("only all"),
        nope: 'testnope.js'// this is to check if media queries are supported at all
    },

    {
        test: Modernizr.mq("only screen and (min-width: 960px) and (max-width:1440px)"),
        yep: 'test3.js'
    },

    {
        test: Modernizr.mq("only screen and (min-width: 768px) and (max-width: 959px)"),
        yep: 'test2.js'
    },

    {
        test: Modernizr.mq("only screen and (min-width:480px) and (max-width:767px)"),
        yep: 'test1.js'
    },

    {
        test: Modernizr.mq("only screen and (max-width:479px)"),//smallest screen
        yep: 'test0.js'
    }
]);

希望这可以帮助。