Javascript@media min size-仅在特定窗口大小下激活

我有一个javascript，我只想在窗口大小最小为1326px时使用它

这就是我所做的，但它不起作用。无论窗口大小如何，脚本都会运行

如果你看前两行，这就是我用来检测窗口大小的方法

var mq = window.matchMedia( "(min-width: 1326px)" );
if (mq.matches)
    {
    function openNav() {
        document.getElementById("mySidenav").style.width = "250px";
        document.getElementById("sidebar-loc").style.marginLeft = "250px";
    }
    function closeNav() {
        document.getElementById("mySidenav").style.width = "0";
    document.getElementById("sidebar-loc").style.marginLeft= "0";
    }
    ( function($) {
    $(document).ready(function () {
        slider();
    });
    } ) ( jQuery );
    ( function($) {
    $(window).scroll(function () {
    slider();
    });
    } ) ( jQuery );
    function slider() {
        if (document.body.scrollTop > 700)
            ( function($) {
            $('#sliderr').stop().animate({"margin-left": '0'});
            } ) ( jQuery );
        else
            ( function($) {
            $('#sliderr').stop().animate({"margin-left": '-200'});
            } ) ( jQuery );
    }
    (jQuery);
    ( function($) {
    $(document).ready( function() {
        $("#show_arrow").hide(); //hide your div initially
        $(window).scroll(function() {
            if($(window).scrollTop() > 700) { //scrolled past the other div?
                $("#show_arrow").show(); //reached the desired point -- show div
            }
            else($(window).scrollTop() < 700) 
                $("#show_arrow").hide();
        });
    });
    } ) ( jQuery );
    }

var mq=window.matchMedia（（最小宽度：1326px））；
if（mq.matches）
{
函数openNav（）{
document.getElementById（“mySidenav”）.style.width=“250px”；
document.getElementById（“侧边栏位置”）.style.marginLeft=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidenav”）.style.width=“0”；
document.getElementById（“侧边栏位置”）.style.marginLeft=“0”；
}
（函数（$）{
$（文档）.ready（函数（）{
滑块（）；
});
}）（jQuery）；
（函数（$）{
$（窗口）。滚动（函数（）{
滑块（）；
});
}）（jQuery）；
函数滑块（）{
如果（document.body.scrollTop>700）
（函数（$）{
$（'#sliderr'）.stop（）.animate（{“左边距”：“0'）；
}）（jQuery）；
其他的
（函数（$）{
$（'#sliderr'）.stop（）.animate（{“左边距”：'-200'}）；
}）（jQuery）；
}
（jQuery）；
（函数（$）{
$（文档）.ready（函数（）{
$（“#显示箭头”）.hide（）；//最初隐藏您的div
$（窗口）。滚动（函数（）{
如果（$（window）.scrollTop（）>700）{//滚动到另一个div之前？
$（“#show_arrow”）.show（）；//达到了所需的点--show div
}
else（$（窗口）.scrollTop（）<700）
$（“显示箭头”）.hide（）；
});
});
}）（jQuery）；
}

您需要添加一个侦听器

有点像这样

if (matchMedia) {
  var mq = window.matchMedia("(min-width: 1326px)");
  mq.addListener(WidthChange);
  WidthChange(mq);
}

---

这不起作用，因为在代码运行时，您只检查媒体查询是否匹配一次

解决方案是将整个代码包装在

mq.addListener（函数（e）{code}）

中。

e

对象还具有属性

.matches

，或者您仍然可以使用

mq.matches

，该属性也会在更改时更新

还请记住，此功能仍然是一个工作草案，并且是可用的。如果您想在这些浏览器中获得支持，则必须侦听窗口大小调整事件，并根据窗口宽度确定媒体查询是否匹配。

如果（$（window）.width（）>1326）{//do something}，请尝试此