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'
    }
]);

希望这有帮助。

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

1 个答案: