首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >根据屏幕分辨率添加css类名并使用jquery删除css类名

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

Stack Overflow用户
提问于 2021-12-10 05:08:45
回答 1查看 91关注 0票数 0

我正在尝试根据使用jquery的解析添加类名和删除类名。

这是我的Jquery代码。在移动模式下,我在桌面模式下获得totopDesk,我只在平板模式下获得totop_tab,我得到的是正确的类。我在这里做错了什么

代码语言:javascript
复制
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中处于Tablet模式时,类被剔除了,只显示了桌面css。

EN

回答 1

Stack Overflow用户

发布于 2021-12-12 22:52:37

根据您的图片,您的媒体查询位于main.css文件的第23行,其余的代码从main.css文件的第71行开始。您需要在尝试更改的主要样式之后移动媒体查询。CSS从上到下读取并应用最底层的样式。由于您的媒体查询位于主样式之前,因此没有应用它。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/70299995

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档