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

Posted 2023-05-08

【中文标题】根据屏幕分辨率使用 jquery 添加 css 类名并删除 css 类名

【英文标题】：add css classname and remove css classname using jquery based on the screen resolution

【发布时间】：2022-01-14 21:06:22

【问题描述】：

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

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

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

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

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

【问题讨论】：

为什么不用纯css @media

@ProGu 我有一个问题，当我调整 Chrome 窗口的大小时，它没有按预期工作

您可以使用 Web API matchMedia - developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia 作为脚本中的断点

我试过你的代码，它在我身上运行良好。顺便说一句，你如何设置你的 if 子句你不需要 isDesktop() 函数。如果您要使用它，请注意 992 在平板电脑和台式机中都会返回 true（在这里不会引起问题，但仍然存在）

如何订阅媒体查询更改的示例在这里：developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… const mediaQueryList = window.matchMedia("(max-width: 576px)"); mediaQueryList.addEventListener('change', handleIsMobile);

【参考方案1】：

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