LESS.CSS和CSS文件替换JS即时问题

时间:2013-10-29 15:42:46

标签: javascript jquery css less

我遇到了以下问题 - 我正在使用一个简单的JS代码来动态替换CSS文件,具体取决于浏览器窗口大小。它看起来像这样:

<script type="text/javascript">
//<![CDATA[
<!--
function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "narrow.css");
    } else if ((width >= 701) && (width < 1120)) {
        $("#size-stylesheet").attr("href", "medium.css");
    } else {
       $("#size-stylesheet").attr("href", "wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

-->
//]]>
</script>

然而,除此之外 - 我还使用LESS.CSS(http://lesscss.org/)。好吧,那两个不能很好地合作 - 用LESS,据我所知,CSS嵌入到HTML文档本身,所以CSS文件没有被替换。有没有办法使它工作?或者可能 更好的方法?

1 个答案:

答案 0 :(得分:2)

你不能只使用媒体查询吗?

<link rel='stylesheet' media='screen and (max-width: 701px)' href='narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 1120px)' href='medium.css' />
<link rel='stylesheet' media='screen and (min-width: 1120px)' href='wide.css' />