JavaScript与Media Query冲突？视口切换时菜单显示异常如何解决？

问题原因 #

核心矛盾是行内样式优先级高于CSS媒体查询的类选择器：
当你通过原JavaScript代码修改menu.style.visibility时，会直接给目标元素添加行内样式（例如style="visibility: hidden;"）。而CSS媒体查询中定义的.css_menu_1 { visibility: visible; }属于类选择器，优先级低于行内样式。因此即使视口宽度超过800px，行内的hidden属性依然会覆盖媒体查询规则，导致菜单无法显示。

修复方案 #

改用CSS类切换替代直接操作行内样式，避免样式优先级冲突：

1. 添加控制显示的CSS类 #

.css_menu_1.active 
{ 
    visibility : visible; 
    width: 75vw;
}

2. 替换JavaScript逻辑 #

通过监听点击事件切换元素的active类，不再直接修改行内样式：

<script type="text/javascript">
    var btnMenu1 = document.getElementById('btn_menu_1');      
    var menu1 = document.getElementById('menu_1');       
    btnMenu1.addEventListener('click', () => 
    {
        menu1.classList.toggle('active');
    });
</script>

方案说明 #

• 视口宽度<800px时：通过点击按钮切换active类，控制菜单的显示/隐藏，不会生成行内样式。
• 视口宽度≥800px时：媒体查询的.css_menu_1 { visibility: visible; }规则直接生效，不受active类的影响（因为媒体查询的类选择器优先级与自定义类一致，且此时不需要手动控制菜单隐藏）。

内容的提问来源于stack exchange，提问作者Léa Massiot