Yepnope & Modernizr screen.width 条件答案

【问题标题】：Yepnope & Modernizr screen.width ConditionsYepnope & Modernizr screen.width 条件
【发布时间】：2013-04-29 13:11:17
【问题描述】：

我正在尝试（在本地）使用 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 文件吗？（参考上述值）。我知道你可以做这个服务器端，但是在我的位置上。

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

我想我需要添加一个 if 语句，但任何帮助都会非常有用！

-尼尔

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

【问题讨论】：

标签： javascript jquery modernizr yepnope

【解决方案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',                              // ???
}
,...

【讨论】：

谢谢，您知道如何根据上面的媒体查询删除对象吗？我仍然遇到代码问题。它似乎一次加载所有 css 文件，而不是基于窗口宽度......我还删除了内容（jquery .remove(); 通过完整），但没有被调用？
您显示的代码将在 1070 加载几个 .css 文件，我不知道您在测试什么，或者您的完整代码，所以我无法告诉您为什么它会这样做做。也就是说，在加载时根据浏览器宽度加载文件非常糟糕，因为桌面用户可以调整浏览器大小，而平板电脑/手机用户可以更改屏幕方向，从而有效地更改最小/最大宽度。媒体查询的全部意义在于将其中几个放在一个文件中，这样您的网站就可以始终响应，而不仅仅是一次正确调整大小。
是的，我知道你的意思.. 我最初想在媒体宽度上加载 JS。因为我有 jQuery FadeIn 和 SlideDowns.. 但是，在使用移动 css 时，我不需要调用 js ......我想我很懒，想同时添加 CSS。

【解决方案2】：

一些建议：

将“全部”替换为“仅全部”标签
用手机替换第一次测试中的“max-width: 1070px” 设备宽度（320 等）

【讨论】：

你不需要用大字体写几乎所有的东西。