Question

我有一个无序列表<ul>，我想添加一个事件监听器如果它适合某个媒体查询。

原来的css：

        @media (max-width: 414px) {
          transition: all 3s ease-out;
          height: 0px;
          display: none;
        }

eventlistener函数：

    if(window.matchMedia("max-width: 414px")) {
      console.log(list.style.height);
      console.log(list.style.display);
      list.style.height = 'auto'
      list.style.display = 'unset'
    }

帮助：转型似乎不起作用＆amp; list.style.height＆amp;的控制台日志list.style.display都是空的''

Answer 1

转换无效，因为您要将显示从/更改为none。此外，您需要在height之间转换数值（auto不计算在内）。

CSS：

@media (max-width: 414px) {
    transition: all 3s ease-out;
    height: 0;
}

JS：

if (window.matchMedia("(min-width: 414px)").matches) {
  list.style.height = list.style.height + 'px'; // set the exact height
}

Answer 2

由于这行

，它无法正常工作，而你的控制台是空的

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

一定是

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

转换不适用于display:none和height:auto ..

您可以尝试使用opacity代替display。

我制作了一个样本fiddle ..

试着看看控制台，你可以看到它不再是空的。

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

2 个答案: