Question

我正在尝试（本地）使用Yiznope和Modernizr加载CSS＆amp; 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。但是它们都会立即加载，无论如何我可以根据px宽度加载CSS文件吗？（参考上述值）。我知道你可以做这个服务器端，但是在我的位置。

它必须是js中的本地...我目前在SCSS中编码。一切都很好，这只是在窗口宽度上注入文件/显示文件的情况。

我认为我需要添加一个if语句，但是会提供很多帮助！

-Neil

P.S我在本地运行，在使用CodeKit＆amp;的新iMac上运行SCSS。

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

一些建议：

将“all”替换为“only all”标签
使用手机替换第一次测试中的“max-width：1070px” 设备宽度（320等）

Yepnope＆amp; Modernizr screen.width条件

2 个答案: