基本形(if/else)
<script>
$(window).on('load resize',function(){
var w = window.innerWidth;
var x = 768;
if (w >= x){ //768px以上
$('.js_01 li').css('background-color', '#EEEEEE');
}
else { //768pxより下
$('.js_01 li').css('background-color', '#E74C3C');
}
});
</script>
基本形(if/if)
<script>
$(window).on('load resize', function(){
var w = window.innerWidth;
var x = 768;
if (w >= x){ //768px以上
$('.js_02 li').css('background-color', '#EEEEEE');
}
if (w < x){ //768pxより下
$('.js_02 li').css('background-color', '#E74C3C');
}
});
</script>
setTimeout(if/else)
<script>
$(window).on('load resize',function(){
var timer = false;
var w = window.innerWidth;
var x = 768;
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
if (w >= x){ //768px以上
$('.js_03 li').css('background-color', '#EEEEEE');
}
else { //768pxより下
$('.js_03 li').css('background-color', '#E74C3C');
}
}, 200);
});
</script>
setTimeout(if/else if/else PC/TAB/SP版)
<script>
$(window).on('load resize',function(){
var timer = false;
var w = window.innerWidth;
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
if (w >= 1024){ //1024px以上(PCの処理)
$('.js_04 li').css('background-color', 'yellow');
}
else if (w >= 768){ //768px以上 (TABの処理)
$('.js_04 li').css('background-color', '#EEEEEE');
}
else { //768pxより下(SPの処理)
$('.js_04 li').css('background-color', '#E74C3C');
}
}, 200);
});
</script>
setInterval
<script>
$(window).on('load resize', function(){
setInterval(function(){
var w = window.innerWidth;
var x = 768;
if (w >= x){ //768px以上
$('.js_05 li').css('background-color', '#EEEEEE');
}
if (w < x){ //768pxより下
$('.js_05 li').css('background-color', '#E74C3C');
}
}, 200);
});
</script>
要素自体を書き換えてしまう
<ul class="item_box">
ここは空白
</ul>
<script>
$(window).on('load resize',function(){
var w = window.innerWidth;
var x = 768;
if (w >= x){ //768px以上
$('.js_06 .item_box').html('<li style="background-color: #EEEEEE;"></li><li style="background-color: #EEEEEE;"></li><li style="background-color: #EEEEEE;"></li>')
}
else { //768pxより下
$('.js_06 .item_box').html('<li style="background-color: #E74C3C;"></li><li style="background-color: #E74C3C;"></li><li style="background-color: #E74C3C;"></li>')
}
});
</script>