根据屏幕分辨率使用 jquery 添加 css 类名并删除 css 类名

Question

我正在尝试使用 jquery 根据分辨率添加类名和删除类名。

这是我的 Jquery 代码。 在移动模式下，我在桌面模式下获得totopDesk我仅在平板电脑模式下获得totop_tab我得到正确的 class。 我在这里做错了什么

function isMobile(){
    if($(window).width() <= 575){
        return true;
   } else {
       return false;
   }
 }
function isTab(){
   if($(window).width() > 575 && $(window).width() <= 992){
      return true;
    } else {
      return false;
    }
  }
 function isDesktop(){
    if($(window).width() >= 992){
        return true;
        } else {
        return false;
      }
  }

$(window).resize(function ()
  {
     if (isMobile()) {
         goMobile()
    }
   else if (isTab()) {
       goTablet()
     } 
    else {
       goDesktop();
     } 
  })

    function goDesktop()
{
    $("#go_btn").addClass("totopDesk");
    $("#go_btn").removeClass("totop_tab");  
    $("#go_btn").removeClass("totop_mob");
}
function goMobile() {
    $("#go_btn").addClass("totop_mob");
    $("#go_btn").removeClass("totopDesk");
    $("#go_btn").removeClass("totop_tab");
}
function goTablet() {
    $("#go_btn").addClass("totop_tab");
    $("#go_btn").removeClass("totop_mob");
    $("#go_btn").removeClass("totop");
    $("#go_btn").removeClass("totopDesk");  
}

没有 Jquery 简单使用@Media 查询我遇到了这个问题

当我在检查元素 48em 中处于平板电脑模式时，class 被删除，它只显示桌面 css

Answer 1

看来您在桌面 CSS 之前有媒体查询。 由于您的 styles 级联，无论 styles 最后是被应用的。 因此，您必须将媒体查询移至 CSS 文件的底部，但位于较小的媒体查询上方。