Using jQuery for responsive design with $(window).width()?

I am trying to do responsive jQuery, I understand many people suggest using CSS Media Queries, and I do CSS media queries as much as possible, but the things I can do are very limited, and using just CSS Media Queries and/or Boostrap grids has shown their limitations. I am having trouble using $(window).width(). I HAVE searched online for answers, and come across similar questions, but those didn't do the job.

This is my code:

if ( $(window).width() > 480 && $(window).width() < 768) {
   $("html").css("background-color", "red");
} else {
  $("html").css("background-color", "black");
}

The issue is that the screen only stays on a black background color, but doesn't change the background to red when I re-adjust the browser width greater than 480px and below 768px.