I'm facing an issue where I have a basic JS code that switches CSS files based on the size of the browser window. Here is the code:
<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>
However, I am also using LESS.CSS (). These two seem to be incompatible because LESS embeds CSS directly into the HTML document, preventing the CSS file from being replaced. Is there a way to resolve this conflict and make them work together seamlessly?