我遇到了以下问题 - 我正在使用简单的 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' />
关于javascript - LESS.CSS 和 CSS 文件用 JS 即时替换问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19662886/