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

Question

I am trying add classname and remove classname based on the resolution using jquery.

Here is my Jquery code. In mobile mode I am getting totopDesk in desktop mode I am getting totop_tab only in tablet mode I am getting correct class. What I am doing wrong here

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");  
}

without Jquery simple using @Media query I am getting this issue

When I am in Tablet mode in the inspect element 48em class got strike out it showing only deskop css

Answer 1

It appears you have the media query before the desktop CSS. Since your styles cascade, whatever styles come last are the ones that get applied. Therefore, you must move your media query to the bottom of the CSS file but above media queries that are smaller.