Javascript 使用事件侦听器编辑媒体查询CSS

我有一个无序列表

，我也想添加一个事件侦听器 如果它适合某个媒体查询

原始css：

@介质（最大宽度：414px）{
过渡：所有3个都放松；
高度：0px；
显示：无；
}

eventlistener函数：

if（window.matchMedia（“最大宽度：414px”））{
控制台.日志（列表.样式.高度）；
console.log（list.style.display）；
list.style.height='auto'
list.style.display='unset'
}

---

帮助：转换似乎不起作用&list.style.height和list.style.display的控制台日志均为空“”

转换将不起作用，因为您正在将显示从/更改为

无。此外，您需要在数值之间转换高度（
auto
不计算）

CSS:

JS:

转换将不起作用，因为您正在将显示从/更改为
none
。此外，您需要在数值之间转换高度（
auto
不计算）

CSS:

JS:

由于这条线，它无法工作，并且您的控制台是空的

if(window.matchMedia("max-width: 414px")) {

一定是

 if (window.matchMedia("(max-width: 414px)").matches) {

转换不适用于
显示：无
和
高度：自动

您可以尝试
不透明度
而不是
显示

我做了一个样品

试着看看控制台，你可以看到它不再是空的。
它不工作，你的控制台因为这一行而是空的

if(window.matchMedia("max-width: 414px")) {

一定是

 if (window.matchMedia("(max-width: 414px)").matches) {

转换不适用于
显示：无
和
高度：自动

您可以尝试
不透明度
而不是
显示

我做了一个样品

试着看看控制台，你会发现它不再是空的。
你的@media规则里面没有样式规则。那些样式声明要去哪里？你的@media规则里面没有样式规则。那些样式声明去哪里了？您忽略了一个事实，即
max width:414px
表达式必须在括号中，并且matchMedia（）函数返回一个MQL，其中包含一个.matches属性，该属性应该是在该条件下测试的属性，正如Shadow Fiend所指出的。您好，谢谢！在你的帮助下，我在显示部分修复了它！是的，它不适用于过渡和变换，“显示”。但是，在使我的
能够在规模上进行转换之后，它内部的li不会以相同的方式进行转换。。。六羟甲基三聚氰胺六甲醚。。ul通过向下滑动显示，li只是飞入您忽略了以下事实：
max width:414px
表达式必须在括号中，并且matchMedia（）函数返回一个MQL，其中包含一个.matches属性，该属性应该是在该条件下测试的属性，正如Shadow Feind指出的。您好，谢谢！在你的帮助下，我在显示部分修复了它！是的，它不适用于过渡和变换，“显示”。但是，在使我的
能够在规模上进行转换之后，它内部的li不会以相同的方式进行转换。。。六羟甲基三聚氰胺六甲醚。。ul滑落出现，李刚飞进来