1

次の問題があります。単純な 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 ファイルは置き換えられません。それを機能させる方法はありますか？それとももっと良い方法ですか？

4

1 に答える 1

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' />
于 2013-10-29T15:52:43.387 に答える