レスポンシブ対応のときウィンドウ幅でjavascriptの動きを変更したいと思ったことはないでしょうか。今回jQueryを用いてウィンドウ幅に合わせて処理を変更する方法を見つけましたので紹介いたします。
javascript
[js]
<script>
$(window).resize(function(){
var w = $(window).width();
var x = 500;
if (w <= x) {
$(‘#sample’).css({
color: ‘red’
});
} else {
$(‘#sample’).css({
color: ‘black’
});
}
});
</script>
[/js]
HTML
[html]
<p id="sample">サンプル</p>
[/html]
ウィンドウサイズが500px以下の場合は文字が赤になり、それ以外は黒になります。