Javascript 条件媒体查询窗口。匹配媒体

我正在使用

window.matchMedia（）

，当达到

最大或最小宽度时，我似乎无法让函数应用辅助类。我通过简单的字体大小更改重新创建了下面的问题

我已经阅读了
matchMedia（）
，并尝试了两种不同的方法（都包括在下面）。我是否需要同时包含最小值和最大值才能执行函数？或者我在函数本身的实际结构中遗漏了什么


$（文档）.ready（函数（）{
var mq=window.matchMedia（'（最大宽度：700px）'）；
if（mq.matches）{
$（'.title'）.addClass（'big'））
}否则{
$（'.title'）.removeClass（'big'）；
}
});
/*
我试过的第二种方法
$（函数（）{
if（window.matchMedia（‘（最大宽度：700px）’）.matches）{
$（'.title'）.addClass（'big'））
}否则{
$（'.title'）.removeClass（'big'）；
}
});
*/
.title{
字体大小：20px；
}
.大{
字体大小：30px；
}

这是一个标题
它正在工作，也许您希望它检测屏幕大小？
您已将其绑定到document.ready（），因此必须刷新页面才能看到它

试一试：


使窗口小于700px，刷新
使窗口大于700px，刷新
注意区别：）

换言之：

$(document).ready(your function)

每次加载页面时，函数只执行一次

或者，使用它并运行它。使结果窗口大于或小于700px，然后再次运行

如果您需要在每次调整窗口宽度时都运行它，我建议您绑定到
window.onresize，就像我在本文中所做的那样

请注意我放在那里的console.log，它是如何触发的以及何时触发的，您希望在投入生产之前删除它；）
 你说它不工作是什么意思？如果您检查
.title
元素，您将看到按预期添加的
.big
类（如果您的屏幕大小匹配）。非常感谢。是的，我希望它能像媒体查询一样检测调整大小并添加类。