如何使用特定宽度的媒体查询添加和删除类？答案

【问题标题】：How to add and remove class using media queries at a partucular width?如何使用特定宽度的媒体查询添加和删除类？
【发布时间】：2020-07-06 16:02:26
【问题描述】：

我试图在宽度为576px 或更小时添加一个类，并在宽度大于576px 时删除该类，但它不起作用。我做错了什么。请帮忙。我在多个文件中这样做。

.php 文件：

<body>
    <h1 id="hello"> Hello </h1>
    <script src="js/functions.js"></script>
    <script>
        matchMedia("(max-width: 576px)").addListener(max_width_f);
        matchMedia("(min-width: 577px)").addListener(min_width_f);
    </script>
</body>

.js 文件：

var h = document.getElementById("hello");
function max_width_f() {
    h.classList.add("no-display");
}
function min_width_f() {
    h.classList.remove("no-display");
}

.css 文件：

.no-display{ display: none; }

【问题讨论】：

标签： javascript jquery css media-queries

【解决方案1】：

我不确定这是否有效，但您是否尝试检查脚本中 h1 元素的宽度？这将是我会尝试的方式，但我不确定这是否是这样做的方式。

function max_width_f() {
    if(h.width < 576)
      h.classList.add("no-display");
}
function min_width_f() {
    if(h.width > 577)
      h.classList.remove("no-display");
}

然后你可以简单地在脚本标签中调用函数。

【讨论】：