[javascript]レスポンシブデザインのWEBに使用できる！現在のウィンドウサイズの取得と判定をして処理を変更する方法

レスポンシブ対応のときウィンドウ幅でjavascriptの動きを変更したいと思ったことはないでしょうか。今回jQueryを用いてウィンドウ幅に合わせて処理を変更する方法を見つけましたので紹介いたします。

javascript

<script>
$(window).resize(function(){
    var w = $(window).width();
    var x = 500;
    if (w <= x) {
        $('#sample').css({
            color: 'red'
        });
    } else {
        $('#sample').css({
            color: 'black'
        });
    }
});
</script>

HTML

<p id="sample">サンプル</p>

ウィンドウサイズが500px以下の場合は文字が赤になり、それ以外は黒になります。

参考：
jQueryで現在のウィンドウサイズの取得と判定をして処理を変えるやり方