【问题标题】：adaptive.js & LESS CSS compatibility issueAdaptive.js 和 LESS CSS 兼容性问题
【发布时间】：2013-03-20 21:22:58
【问题描述】：

我对 adaptive.js 及其与 LESS 的兼容性有疑问。问题是您无法在头部指定文档的类型，因为您必须通过 js 包含它。

<script>
    // Edit to suit your needs.
    var ADAPT_CONFIG = {
        // Where is your CSS?
        path: 'css/responsive/',

        // false = Only run once, when page first loads.
        // true = Change on window resize and page tilt.
        dynamic: true,

        // First range entry is the minimum.
        // Last range entry is the maximum.
        // Separate ranges by "to" keyword.
        range: [
            '0px    to 760px  = mobile.min.css',
            '760px  to 980px  = 720.min.css',
            '980px  to 3000px = 960.min.css',
        ]
    };
</script>

我的问题是有没有办法告诉adaptive.js文件应该作为更少的文件提供：

<script type="text/less">

而不仅仅是：

<script type="text/stylesheet">

或者我必须在adaptive.js生效之前提供CSS服务器端吗？

任何帮助都会很棒。

【问题讨论】：

你为什么不直接编译你的less文件呢？不是答案，而是简单的解决方案。
我认为你的意思是在你的问题中使用<link> 而不是<script>

标签： javascript css responsive-design less

【解决方案1】：

通过改变来修改adaptive.js

css.rel = 'stylesheet';

成为

css.rel = 'stylesheet/less';

最终的代码应该是这样的：

var css = d.createElement('link');
css.rel = 'stylesheet/less';
css.media = 'screen';

请注意，您仍然需要重新初始化less.js。

更新

我以前不知道如何重新初始化 less，但看起来 1.0.31 版有一个方法：less.refreshStyles() 它将重新编译带有 type="text/less" 的标签

在你的配置上添加

callback: less.refreshStyles(),

【讨论】：

非常感谢，我以前用 text/less 试过这个，但没有用。干杯。
工作宝石。现在我只需要弄清楚如何在大小调整时减少导入 css 的数量。感谢您的帮助。