为什么不是'；t媒体查询在通过javascript更改值后更新值？

我有一个相当标准的导航栏，上面有一个列表，其中包含指向我的子站点的链接。我在网站上添加了一个汉堡包菜单图标，它应该出现在小屏幕和手机屏幕上。此外，我还通过css媒体查询将链接的字体大小设置为零来隐藏链接。如果单击菜单图标，我将启动一个javascript函数，这将相应地增加/减少链接的大小

所有这些都非常有效，只有一个问题。脚本更改链接的字体大小后，只要我调整浏览器大小，媒体查询就会保留这些值，而不会出于某种原因更新这些值。因此，根据移动菜单是打开还是关闭，fontsize要么非常大，要么为零。为什么在将浏览器重新调整为全屏时这些值没有更新

包含复制所需代码的代码片段：

var open=false；
函数openmobilemenu（）{
var nav=document.getElementsByTagName（“nav”）；
var links=nav[0].getElementsByTagName（“li”）；
如果（！打开）{
对于（变量i=0；i

标题{
位置：相对位置；
宽度：100%；
高度：200px；
背景图像：url（“../img/header.png”）；
背景重复：无重复；
背景位置：右；
背景尺寸：自动100%；
背景色：#CDCCA；
}
收割台img{
位置：绝对位置；
宽度：500px；
填充：0.15%；
底部：10px；
}
移动电话{
显示：无；
}
导航{
位置：相对位置；
背景色：#61625B；
宽度：100%；
高度：100px；
}
导航ul{
位置：绝对位置；
底部：0；
宽度：70%；
列表样式：无；
填充：0.15%；
显示器：flex；
保证金：0；
}
李海军{
宽度：125px；
文本对齐：居中；
过渡：无；
}
.navunderline{
宽度：125px；
身高：0；
保证金：5px0；
背景色：#DAD9D7；
过渡时间：500ms；
}
导航a{
颜色：#DAD9D7；
}
导航a：悬停{
文字装饰：无；
}
李导航：悬停。导航下划线{
高度：5px；
保证金：0；
}
@媒体屏幕和（最大宽度：800px），（悬停：无）{
移动电话{
显示器：flex；
颜色：#61625B；
字体大小：100px；
利润率：5%；
}
.mobilemenu a，a:悬停，a:活动{
文字装饰：无；
}
导航{
位置：相对位置；
背景色：#61625B；
宽度：100%；
最小高度：10px；
高度：自动；
溢出：可见；
填充：0；
保证金：0；
}
导航ul{
位置：相对位置；
高度：自动；
底部：0；
宽度：100%；
列表样式：无；
弯曲方向：立柱；
填充：0；
}
李海军{
宽度：100%；
文本对齐：居中；
保证金：0；
填充：0；
字号：0；
高度：自动；
}
李导航：悬停{
背景色：#8b131f；
}
.navunderline{
显示：无；
}

这是因为JS在元素上设置内联样式，而内联样式总是比样式表中的任何内容都更具体

有三种解决方法：

在窗口调整大小时使用JS删除这些样式

不内联样式，但在调整大小时添加/删除这些元素上的类。使用样式表控制这些元素的样式

在样式表中将字体样式设置为

！important

（唯一解决特殊性的方法-不推荐使用）

---

这是因为JS在元素上设置内联样式，而内联样式总是比样式表中的任何内容都更具体

有三种解决方法：

在窗口调整大小时使用JS删除这些样式

不内联样式，但在调整大小时添加/删除这些元素上的类。使用样式表控制这些元素的样式

在样式表中将字体样式设置为

！important

（唯一解决特殊性的方法-不推荐使用）

---

啊，谢谢@Desifor。我想第二个建议将是最好的选择，因为我在w3学校看到过这种方式，总是想知道为什么他们会增加额外的课程。啊，谢谢@Desifor。我想第二个建议将是最好的选择，因为我在w3学校看到过这种方式，总是想知道，为什么他们会这样做添加额外的类。