少.CSS 和 CSS 文件替换为 JS 动态问题

LESS.CSS and CSS file replacement with JS on the fly issue

本文关键字：CSS JS 动态 问题 替换 文件      更新时间：2023-09-26

我遇到了以下问题 - 我正在使用简单的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 文件。有什么方法可以让它工作吗？或者也许更好的方法？

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

<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' />
相关文章：