Javascript 视屏幕宽度而定

我已经创建了一个JS if语句，它应该检测屏幕宽度，并根据屏幕宽度更改css属性。如果屏幕宽度大于700px，则应扩展#header_菜单。如果分辨率低于700，则应扩展#菜单（通过单击触发器）

总而言之，该功能正在工作，但这只是我第一次调整窗口的大小。我不确定是什么错误

谢谢你的帮助；）

---

}))

将窗口的调整大小事件激活到一个函数，请尝试以下操作

$(document).load($(window).bind("resize", checkPosition));

function checkPosition(){
    if (window.matchMedia('(max-width: 700px)').matches) {
        $("#menu_trigger").click(function(){
            $("#menu").css('width', '90%');
            $("#closer, #header").css('margin-left', '90%');
            $("#closer, #header").css('margin-right', '-90%');
        });
    } else {
        $("#menu_trigger").click(function(){
            $("#header_menu").css('width', 'auto');
        });
    }
}

---

每次调整页面大小时，都会调用该函数

，因为我想根据屏幕宽度更改#菜单"触发按钮的功能谢谢您的回答！当我将窗口从700像素以上缩小到700像素以下时，该功能正常工作。但当我将分辨率从700以下更改为700以上时，它仍然会放大#菜单，但不会放大#标题#菜单。有什么想法吗？尝试使用以下条件：如果（$（window）.width（）<700）{..}或者如果（$（window）.width（）>700）{..}或者我发现了问题。调整大小后，单击功能中出现了一些问题。我刚刚在click函数中添加了相反的行为。谢谢你的帮助！如果答案解决了您的问题“接受它”，那么请帮助其他用户：）

$(document).load($(window).bind("resize", checkPosition));

function checkPosition(){
    if (window.matchMedia('(max-width: 700px)').matches) {
        $("#menu_trigger").click(function(){
            $("#menu").css('width', '90%');
            $("#closer, #header").css('margin-left', '90%');
            $("#closer, #header").css('margin-right', '-90%');
        });
    } else {
        $("#menu_trigger").click(function(){
            $("#header_menu").css('width', 'auto');
        });
    }
}