Yepnope & Modernizr screen.width条件

Question

我正在尝试(本地)使用Yepnope和Modernizr来加载CSS & JS文件。这样我就可以更好地管理这些文件，并且可以轻松地编写代码。

这是当前的布局：

Modernizr.load([
    {
        test: Modernizr.mq('all and (max-width: 1070px)'),
        yep: '/css/smartdevice.css','/js/smartdevice.js',
    }
    ,
    {
        test: Modernizr.mq('all and (min-width: 481px) and (max-width: 1069px)'),
        yep: '/css/tablet.css','/js/tablet.js',
    },
    {
        test: Modernizr.mq('all and (max-width: 1070px)'),
        yep: '/css/screen.css','/js/screen.js',
    }
]);

虽然我是JS的新手，但我已经在很多场合使用过jQuery。然而，他们都加载一次，有没有任何我可以加载的CSS文件的基础上的px宽度？(参考上面的值)。我知道您可以在服务器端这样做，但是在我的位置上。

它必须是js中的本地端...我目前在SCSS中编写代码。最后一切都很好，这只是一个注入文件/在窗口宽度上显示文件的例子。

我假设我需要添加一条if语句，但是任何帮助都会被提供！

-Neil

附注:我在本地使用CodeKit和SCSS在新的iMac上运行。

Answer 1

yep: '/css/smartdevice.css','/js/smartdevice.js',是非法的JS。如果希望它是一个数组，请使用yep: ['/css/smartdevice.css','/js/smartdevice.js'],。每当您在JavaScript对象中看到逗号时，假设其中有一个换行符，您就会看到这里出了什么问题：

Modernizr.load([
{
    test: Modernizr.mq('all and (max-width: 1070px)'), // prop:val(=function)
    yep: '/css/smartdevice.css',                       // prop:val(=string)
    '/js/smartdevice.js',                              // ???
}
,...

Answer 2

一些建议：

1. 将"all“替换为标签"only all”
2. 将第一次测试中的"max- width : 1070px“替换为移动设备宽度(320等)