jQueryを使ってjsをレスポンシブ化。

CSSでメディアクリエを使ってスタイルの変更なんかはいいんだけど、画面サイズによってjsも切り替えたい場合のスニペット。

Js Responsive
<div id="box">Js Responsive</div>
<style>
#box{
padding:60px;
font-size:24px;
color:#fff;
margin:40px 0;
}
</style>
<script>	
var func = function(){
var windowWidth = $(window).width();
var windowXs = 480;
var windowSm = 768;
var windowMd = 992;
var windowLg = 1200;
if (windowWidth <= windowXs) {
$('#box').css({
backgroundColor: 'red'
});
} else if (windowWidth <= windowSm) {
$('#box').css({
backgroundColor: 'blue'
});
} else if (windowWidth <= windowMd) {
$('#box').css({
backgroundColor: 'pink'
});
} else if (windowWidth <= windowLg) {
$('#box').css({
backgroundColor: 'green'
});
} else{
$('#box').css({
backgroundColor: 'black'
});
}
};
$(document).ready(function($){
func(); 
});
$(window).resize(function($){
func(); 
});
</script>