LESS.CSS和CSS文件替換與JS在飛行問題

我有以下問題 - 我使用一個簡單的JS代碼，以取代CSS瀏覽器窗口大小的動態。它看起來像這樣：LESS.CSS和CSS文件替換與JS在飛行問題

<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是嵌入到HTML文檔中的，所以CSS文件不會被替換。有什麼辦法可以使它工作嗎？或者也許更好的方法？

來源

2013-10-29 Irminsul

「與LESS，據我所知，CSS嵌入到HTML文件本身」不正確。 LESS只是編譯成純CSS。在服務器端進行生產，並且你是黃金。只需鏈接到.less文件，讓你的服務器進行編譯（並緩存）。 – xec

難道你只是使用媒體查詢？

<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' />

來源

2013-10-29 15:52:43 Prisoner

嗯，我正在考慮這個問題。我決定使用jQuery，因爲瀏覽器的兼容性 - IE9以下的版本不支持媒體查詢？ – Irminsul

你應該看看這個問題：http://stackoverflow.com/a/5770956/475125 – Prisoner

謝謝你，這是非常有益的。解決了我的問題。 – Irminsul

LESS.CSS和CSS文件替換與JS在飛行問題

回答

相關問題