2

我第一次在一个项目中使用了 adapt.js。我的范围是 0 到 720，我想加载一个 mobile.css 文件以及第二个 css 文件，我们称之为 style.css。这可能吗？有解决办法吗？我尝试了这个，但它没有像预期的那样工作。

var ADAPT_CONFIG = {
    path: 'css/',

    dynamic: true,

    range: [
        '0px    to 720px  = style.css',
        '0px    to 720px  = mobile.css',
        '720px            = 720.css'
    ]
};
4

2 回答 2

1

您可以使用

@import url('/css/mobile.css');

在style.css的开头。

然后配置（通过 ADAPT_CONFIG）adapter.js 以仅使用style.css用于该范围。

反之亦然，您可以在 mobile.css 末尾导入 style.css 并仅使用 mobile.css

于 2013-02-26T11:12:52.123 回答
0

恐怕这是不可能的，但如果你有胆量，你可以修改 adapt.js 的源代码来做到这一点。这是adapt.js的关键部分：

// If it's a range, split left/right sides of "to",
// and then convert each one into numerical values.
// If it's not a range, turn maximum into a number.
val_1 = is_range ? parseInt(arr_0.split('to')[0], 10) : parseInt(arr_0, 10);
val_2 = is_range ? parseInt(arr_0.split('to')[1], 10) : undefined;

// Check for maxiumum or range.
if ((!val_2 && i === last && width > val_1) || (width > val_1 && width <= val_2)) {
    // Build full URL to CSS file.
    file && (url = path + file);

    // Exit the while loop. No need to continue
    // if we've already found a matching range.
    break;
}

它位于检查您在 ADAPT_CONFIG 中指定的范围条件的 while 循环内。如您所见，一旦找到路径，就不再检查“范围”是否有任何其他匹配项。您可能可以更改代码以允许它 - 您可能必须将 while 循环之后的代码移动到上面的 if 语句中并删除 break（这是一个有根据的猜测，我没有尝试过）。

但是，根据您提供文件的方式，我强烈考虑使用资产管理器将“style.css”和“mobile.css”组合到一个文件中 - 预编译资产允许一些其他有趣的技巧，比如自动使 css 文件尽可能小。

编辑 - 如果您对资产管理器感兴趣，那么真的没有一种方法可以做到；这在很大程度上取决于您在工作中使用的环境。对于像 rails 这样的东西，这非常容易，因为合并文件已经很成熟了，而且 sprockets gem 有很多其他的资产管理功能（在其中合并文件非常快）。如果我是你，虽然我可能只是按照“将 css 文件与”结合起来的方式进行一些快速的谷歌搜索，但会有很多选择。如果您没有花哨的框架（这是一个很有前途的示例），那么用于此的 PHP 脚本到处都是，而 Google为这种炒锅 制作了一个Apache 模块。

如果您确实走这条路，我鼓励您在基本工作正常后尝试一下-您可以做一些漂亮的事情，例如在合并文件的同一位置生成 ADAPT_CONFIG 中的范围值，给您一个漂亮干净的单点，您可以在其中管理样式文件。

于 2012-09-27T21:00:01.667 回答