jQuery媒体查询切换按钮-根据屏幕宽度的不同执行不同的操作

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="styles.css">

<button id="toggleButton">切换</button>

$(window).resize(function() {
   // 在这里编写根据屏幕宽度执行不同操作的代码
});

$(window).resize(function() {
   var screenWidth = $(window).width();
   
   if (screenWidth < 768) {
      // 当屏幕宽度小于768px时执行的操作
   } else if (screenWidth >= 768 && screenWidth < 992) {
      // 当屏幕宽度在768px和992px之间时执行的操作
   } else {
      // 当屏幕宽度大于等于992px时执行的操作
   }
});

$(window).resize(function() {
   var screenWidth = $(window).width();
   
   if (screenWidth < 768) {
      // 当屏幕宽度小于768px时执行的操作
      $('#toggleButton').show();
   } else if (screenWidth >= 768 && screenWidth < 992) {
      // 当屏幕宽度在768px和992px之间时执行的操作
      $('#toggleButton').hide();
   } else {
      // 当屏幕宽度大于等于992px时执行的操作
      $('#toggleButton').css('background-color', 'red');
   }
});